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内 容 提 要 
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本 书 既 适合 JavaScript 语言 初学 者 了 解 其 精髓 ， 又 适合 经 验 丰 富 的 JavaScript 开发 人 员 深 入 
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到 
ll 


我 相信 你 已 经 注意 到 了 这 一 系列 图 书 的 封面 上 都 有 大 大 的 “JS ， 它 并 不 是 用 来 诅咒 
JavaScript 的 缩写 ， 尽 管 我 们 大 家 都 诅 台 过 这 门 语 言 的 怪异 之 处 。 


从 最 早期 的 Web 开始 ，JavaScript 就 是 驱动 内 容 消费 的 交互 式 体验 的 基本 技术 。 尽 管内 
烁 的 鼠标 轨迹 和 恼人 的 弹出 式 广 告 可 能 是 JavaScript 起 步 的 地 方 。 但 是 近 二 十 年 之 后 ， 
JavaScript 的 技术 和 功能 已 经 有 了 很 大 的 发 展 ， 并 且 位 于 世界 上 使 用 最 广泛 的 软件 平台 一 一 
Web 的 核心 ， 它 的 重要 性 几乎 没有 人 再 会 质疑 。 














但 是 ， 作 为 一 门 编程 语言 ，JavaScript 一 直 为 人 诉 病 ， 部 分 原因 是 其 历史 治 革 ， 更 重要 的 
原因 则 是 其 设计 理念 。 因 为 JavaScript 这 个 名 字 ，Brendan Eich 曾 戏称 它 为 “ 傻 小 弟 ”( 相 
对 于 成 熟 的 Java 而 言 )。 实 际 上 ， 这 个 名 字 完 全 是 政治 和 市 场 考量 下 的 产物 。 两 门 语言 
间 千 差 万 别 , “JavaScript” 之 于 “Java” 就 如 同 “Carnival” (嘉年华 ) 之 于 “Car”( 汽 车 ) 
一 样 ， 两 者 之 间 并 无 半点 关系 。 


JavaScript 在 概念 和 语法 风格 上 借鉴 了 其 他 编程 语言 ， 包 括 C 风格 的 过 程式 编程 和 隐 临 的 
Scheme/Lisp 风格 的 函数 式 编程 ， 这 使 得 它 能 为 不 同 背 景 的 开发 人 员 所 接受 ， 包 括 那 些 没 
有 多 少 编程 经 验 的 人 。 用 JavaScript 编写 一 个 “Hello World” 程 序 非 常 简单 。 因 此 对 于 初 
学 者 而 言 ， 它 是 有 吸引 力 和 易学 的 。 


JavaScript 可 能 是 最 容易 上 手 的 编程 语言 之 一 ， 但 它 的 一 些 奇特 之 处 使 得 它 不 像 其 他 语言 
那样 容易 完全 掌握 。 要 想 用 C 或 者 C++ 开发 一 个 完整 的 应 用 程序 ， 开 发 者 需要 对 该 门 话 
言 有 相当 深入 的 了 解 。 然 而 对 于 JavaScript， 即 使 我 们 用 它 开 发 了 一 个 完整 的 系统 也 不 见 
得 就 能 深入 理解 它 。 

































































这 门 语 言 中 有 些 复 杂 的 概念 隐藏 得 很 深 ， 却 常常 以 一 种 看 似 简单 的 形式 呈现 。 例 如 ， 将 函 
数 作为 回调 函数 传递 ， 这 让 JavaScript 开发 人 员 往 往 满足 于 使 用 这 些 现成 便利 的 机 制 ， 而 
不 愿 去 探究 其 中 的 原理 。 





Xi 
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JavaScript 是 一 门 简单 易 用 的 语言 ， 应 用 广泛 ， 同 时 它 的 语言 机 制 又 十 分 复杂 和 微妙 ， 即 
使 经 验 丰富 的 开发 人 员 也 需要 用 心 学 习 才 能 真正 掌握 。 





JavaScript 的 矛盾 之 处 就 在 于 此 ， 它 的 阿 喀 琉 斯 之 中 正 是 本 书 要 解决 的 问题 。 因 为 无 需 深 
入 理解 就 能 用 它 来 编程 ， 所 以 人 们 常常 放松 对 它 的 学 习 。 


使 命 
在 学 习 JavaScript 的 过 程 中 ， 磁 到 令 人 抓 狂 的 问题 或 挫折 时 ， 如 果 置 之 不 理 或 不 求 其 解 
(就 像 有 些 人 习惯 做 的 那样 )， 我 们 很 快 就 会 发 现 自己 根本 无 从 发 挥 这 门 语言 的 威力 。 


尽管 这 些 被 称 为 JavaScript 的 “精华 ”部 分 ， 但 我 忍 请 读者 朋友 们 将 其 看 作 “ 容 易 的 ”“ 安 
全 的 ”或 者 “不 完整 的 ”部 分 。 











“你 不 知道 的 JavaScript” 系 列 丛 书 旨 在 介绍 JavaScript 的 另 一 面 ， 让 你 深入 掌握 JavaScript 
的 全 部 ， 特 别 是 那些 难点 。 


JavaScript 开发 人 员 常 党 满足 于 一 知 半 解 ， 不 愿 更 深入 地 了 解 其 深层 原因 和 运作 方式 ， 本 
书 要 解决 的 正 是 这 个 问题 。 我 们 会 直面 那些 疑难 困惑 ， 绝 不 回避 。 























我 个 人 不 会 仅仅 满足 于 让 代码 运行 起 来 而 不 明 就 里 ， 你 也 应 该 这 样 。 本 书 中 ， 我 会 逐步 介 
绍 JavaScript 中 那些 不 太 为 人 所 知 的 地 方 ， 最 终 让 你 对 这 门 语言 有 一 个 全 面 的 了 解 。 一 旦 
掌握 了 这 些 知识 ， 那 些 技巧 、 框 架 和 时 泌 术 语 等 都 将 不 在 话 下 。 

















本 系列 丛书 全 面 深入 地 介绍 了 JavaScript 中 常 为 人 误解 和 忽视 的 重要 知识 点 ， 让 你 在 读 完 
之 后 不 论 从 理论 上 还 是 实践 上 都 能 对 这 门 语 言 有 足够 的 信心 。 





目前 你 对 JavaScript 的 了 解 可 能 都 来 自 那 些 自身 就 一 知 半 解 的 “专家 ”， 而 这 仅仅 是 冰山 一 
角 。 读 完 本 系列 从 书后 ， 你 将 真正 了 解 这 门 语言 。 现 在 就 让 我 们 踏 上 阅读 寻 知 之 旅 吧 。 











JavaScript 是 一 门 优秀 的 语言 。 只 学 其 中 一 部 分 内 容 很 容易 ， 但 是 要 全 面 掌 握 则 很 难 。 开 
发 人 员 遇 到 困难 时 往往 将 其 归咎 于 语言 本 身 ， 而 不 反省 他 们 自己 对 语言 的 理解 有 多 革 乏 。 
本 系列 丛书 旨 在 解决 这 个 问题 ， 使 读者 能 够 发 自 内 心地 喜欢 上 这 门 语言 。 



































本 书 中 的 很 多 示例 都 假定 你 使 用 的 是 现代 (以 及 未 来 ) 的 JavaScript 引擎 环 
境 ， 比 如 ES6。 有 些 代码 在 旧版 本 (ES6 之 前 ) 的 引擎 下 可 能 不 会 像 书 中 描 
述 的 那样 工作 。 
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排版 约定 
本 书 使 用 了 下 列 排 版 约定 。 


。 黑体 
表示 新 术语 或 重点 强调 的 内 容 。 


。 等 宽 字 体 (constant width) 
表示 程序 片段 ， 以 及 正文 中 出 现 的 变量 、 函 数 名 、 数 据 库 、 数 据 类 型 、 环 境 变 量 、 语 
句 和 关键 字 等 。 





。 加 粗 等 宽 字体 (constant width bold) 
表示 应 该 由 用 户 输入 的 命令 或 其 他 文本 。 


。 等 宽 斜 体 (constant width italic) 
表示 应 该 由 用 户 输入 的 值 或 根据 上 下 文 确定 的 值 替 换 的 文本 。 


该 图 标 表示 提示 或 建议 。 


该 图 标 表示 一 般 注 记 。 





该 图 标 表示 警告 或 警示 。 





使 用 代码 示例 


补充 材料 (代码 示例 、 练 习 等 ) 可 以 从 http://bit.ly/ydkjs-up-going-code 和 http://bit.ly/ydkjs- 
es6beyond-code 下 载 。 








本 书 是 要 帮 你 完成 工作 的 。 一 般 来 说 ， 如 果 本 书 提供 了 示例 代码 ， 你 可 以 把 它 用 在 你 的 程 
序 或 文档 中 。 除 非 你 使 用 了 很 大 一 部 分 代码 ， 否 则 无 需 联系 我 们 获得 许可 。 比 如 ， 用 本 书 
的 几 个 代码 片段 写 一 个 程序 就 无 需 获 得 许可 ， 销 售 或 分 发 O'Reilly 图 书 的 示例 光盘 则 需要 
获得 许可 ， 引 用 本 书 中 的 示例 代码 回答 问题 无 需 获 得 许可 ， 将 书 中 大 量 的 代码 放 到 你 的 产 
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品 文档 中 则 需要 获得 许可 。 


我 们 很 希望 但 并 不 强制 要 求 你 在 引用 书 中 内 容 时 加 上 引用 说 明 。 引 用 说 明 -一般 包括 书 名 、 
作者 、 出 版 社 和 ISBN。 比 如 : “Yox Don’t Know JavaScript: Up & Going by Kyle Simpson 
(O’Reilly). Copyright 2015 Getify Solutions, Inc., 978-1-491-92446-4”。 














如 果 你 觉得 自己 对 示例 代码 的 用 法 超出 了 上 述 许可 的 范围 ， 欢 迎 你 通过 permissions@ 
oreilly.com 与 我 们 联系 。 


Safari” Books Online 
Safari Books Online (http:/www.safaribooksonline.com) 是 应 运 而 
号 Safani 生 的 数字 图 书馆 。 它 同时 以 图 书 和 视频 的 形式 出 版 世界 顶级 技术 
和 商务 作家 的 专业 作品 。 
技术 专家 、 软 件 开 发 人 员 、Web 设计 师 、 商 务 人 士 和 创意 专家 等 ， 在 开展 调研 、 解 决 问 
题 、 学 习 和 认证 培训 时 ， 都 将 Safari Books Online 视 作 获取 资料 的 首选 渠道 。 



































对 于 组 织 团体 、 政 府 机 构 和 个 人 ，Safari Books Online 提供 各 种 产品 组 合 和 灵活 的 定 
价 策略 。 用 户 可 通过 一 个 功能 完备 的 数据 库 检 索 系 统 访问 O'Reilly Media、Prentice 
Hall Professional、 Addison-Wesley Professional、 Microsoft Press、Sams、Que、Peachpit 




















Press、 Focal Press、 Cisco Press、 John Wiley & Sons、 Syngress、 Morgan Kaufmann、IBM 
Redbooks、 Packt、Adobe Press、FT Press、Apress、Manning、New Riders、McGraw-Hill、 
Jones & Bartlett、Course Technology 以 及 其 他 几 十 家 出 版 社 的 上 千 种 图 书 、 培 训 视频 和 正 
式 出 版 之 前 的 书稿 。 要 了 解 Safari Books Online 的 更 多 信息 ， 我 们 网 上 见 。 


联系 我 们 
请 把 对 本 书 的 评价 和 问题 发 给 出 版 社 。 
美国 : 

O’Reilly Media, Inc. 


1005 Gravenstein Highway North 
Sebastopol, CA 95472 








中 国 : 
北京 市 西城 区 西直门 南大 街 2 号 成 铭 大 厦 C 座 807 室 (100035) 
奥 菜 利 技术 咨询 (北京) 有 限 公 司 


O’Reilly 的 每 一 本 书 都 有 专属 网 页 ， 你 可 以 在 那儿 找到 本 书 的 相关 信息 ， 包 括 勘 误 表 、 示 
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例 代 码 以 及 其 他 信息 。 本 书 第 一 部 分 “起 步 上 路 ”的 网 站 地 址 是 http://bit.ly/ydkjs_up-and- 
going。 本 书 第 二 部 分 “ES6 及 更 新 版 本 ”的 网 站 地 址 是 : http://bit.ly/ydkjs-es6-beyond。 








对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电 子 邮件 到 : bookquestions@oreilly.com 





要 了 解 更 多 O’Reilly 图 书 、 培 训 课 程 、 会 议和 新 闻 的 信息 ， 请 访问 以 下 网 站 : 


http://www.oreilly.com 











我 们 在 Facebook 的 地 址 如 下 : http://facebook.com/oreilly 
请 关注 我 们 的 Twitter 动态 : http://twitter.com/oreillymedia 


我 们 的 YouTube 视频 地 址 如 下 : http:/www.youtube.com/oreillymedia 


电子 书 


扫描 如 下 二 维 码 ， 即 可 购买 本 书 电子 版 。 
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第 一 部 分 





起 步 上 路 
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SY 
XI 
沪 


近 新 学 的 技能 是 什么 ? 





能 是 一 门 外 语 ， 比 如 意大利 语 或 德语 。 可 能 是 一 个 图 像 编 辑 工具 ， 如 Photosnop。 也 可 
能 是 某 种 厨 艺 或 者 木工 活 ， 又 或 是 某 种 健身 项 目 。 请 回忆 一 下 你 最 终 掌 握 这 项 技能 的 那个 
时 刻 ， 那 应 该 就 是 你 突然 顿悟 的 一 刻 。 当 你 学 会 操控 台 饮 或 者 理解 了 法 语 中 阳性 名 词 和 阴 
性 名 词 之 间 的 区 别 时 ， 事 情 就 从 模糊 变 得 明朗 清晰 起 来 。 那 时 感觉 如 何 ? 是 不 是 非常 不 可 


思议 ? 




















现在 ,再 往 前 回忆 一 下 你 掌握 这 项 新 技能 之 前 的 情形 。 那 时 你 是 什么 感觉 呢 ? 可 能 有 点 候 
惧 又 有 点 心慌 ， 是 不 是 ? 在 某 一 刻 ， 我 们 还 不 了 解 自己 现在 已 经 掌握 的 知识 ， 这 完全 设 有 
任何 问题 ， 每 个 人 都 是 从 某 个 起 点 开始 学 习 的 。 学 习 新 技能 是 一 场 令 人 激动 的 探险 ， 特 别 
是 当 你 想 要 高 效 学 习 某 个 主题 时 。 




















我 教授 过 很 多 初级 的 编程 课程 。 跟 着 我 学 习 的 学 生 通 常 之 前 已 经 试 着 通过 博客 或 复制 、 粘 
贴 代码 来 自学 过 HTML 或 者 JavaScript 这 样 的 主题 ， 但 是 他 们 并 没有 能 够 真正 掌握 编码 知 
识 来 实现 想 要 的 目标 。 而 且 ， 由 于 并 没有 真正 掌握 某 些 编 程 主题 的 细节 ， 他 们 便 无 法 编写 
功能 强大 的 代码 或 调试 自己 的 作品 ， 因 为 他 们 并 没有 真正 理解 所 发 生 的 一 切 。 


我 一 直 坚 信 要 以 正确 的 方法 授课 ， 这 意味 着 我 会 讲授 Web 标准 、 语 义 标 记 、 注 释 良 好 的 代 
码 以 及 其 他 的 最 佳 实践 。 我 会 详细 讲解 涉及 的 主题 ， 解 释 如 何 做 以 及 这 么 做 的 原因 ， 而 不 
仅仅 是 扔 出 代码 以 供 复 制 、 粘 贴 。 努 力 理解 自己 的 代码 后 ， 你 就 可 以 更 好 地 完成 任务 ， 同 
时 自己 也 会 得 到 进步 。 此 时 代码 不 再 仅仅 只 是 你 的 工作 ， 更 是 你 的 作品 。 这 就 是 我 喜欢 本 
书 内 容 的 原因 。Kyle 带领 我 们 深入 了 解 语法 和 术语 ， 对 JavaScript 这 个 语言 进行 了 出 色 、 
全 面 的 介绍 。 本 书 并 没有 流 于 表面 ， 而 是 确实 有 助 于 我 们 真正 理解 概念 。 


就 像 只 学 会 如 何在 Photoshop 中 打开 、 关 闭 和 保存 文档 是 不 够 的 ， 只 能 够 将 jQuery 代码 斤 
段 复制 到 你 的 网 站 上 也 是 不 够 的 。 的 确 ， 只 需要 学 习 一 些 与 编程 相关 的 基础 知识 ， 我 就 能 
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够 编写 并 共享 自己 的 设计 。 但 如 果 没 有 对 工具 及 其 背后 原理 的 正确 理解 ， 我 怎么 能 够 定义 
一 个 网 格 或 创建 一 个 明晰 的 类 型 系统 呢 ? 又 如 何 才能 优化 Web 上 的 图 像 呢 ?对 JavaScript 
来 说 也 是 一 样 的 。 如 果 不 清楚 循环 的 工作 模式 、 变 量 的 定义 以 及 作用 域 的 含义 ， 那 么 我 们 
就 无 法 编写 自己 所 能 实现 的 最 佳 代码 。 我 们 不 能 接受 退 而 求 其 次 的 作品 ， 和 毕 况 这 是 我 们 自 
己 的 作品 。 


你 对 JavaScript 的 探索 越 深 入 ， 它 就 会 变 得 越 清晰 。 或 许 你 对 财 包 、 对 象 和 方法 这 样 的 词 
汇 目前 来 说 还 不 是 很 熟悉 ， 但 本 书 将 帮助 你 明晰 这 些 术语 。 我 希望 你 在 开始 学 习 本 书 时 记 
住 自己 学 习 某 样 东西 前 后 的 感受 。 这 可 能 很 艰巨 ， 但 为 了 要 开始 一 段 磨 夸 你 的 知识 宝剑 的 
精彩 之 旅 ， 你 已 经 翻阅 至 此 。 本 书 第 一 部 分 是 我 们 理解 编程 的 起 点 。 享 受 你 顿悟 的 时 刻 
吧 ! 




















Jenn Lukas (http://jennlukas.com, @jennlukas) ， 前 癌 顾 问 





对 
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欢迎 来 到 “你 不 知道 的 JavaScript” 系 列 。 




















本 部 分 介绍 了 编程 中 的 一 系列 基本 概念 ， 并 有 助 于 你 更 好 地 到 


容 。 当 然 ， 本 部 分 的 内 容 会 更 偏向 于 JavaScript ( 常 简写 为 JS)。 如 果 你 是 刚 开始 学 习 编 程 





E 解 本 系列 其 余 几 本 书 的 内 





或 JavaScript， 那 么 本 部 分 将 会 简单 探讨 你 起 步 和 继续 学 习 所 需要 了 解 的 概念 。 











本 部 分 一 开始 会 从 很 高 的 层次 来 介绍 编程 的 基本 原则 。 基 本 上 人 
JavaScript” 系 列 图 书 时 几乎 没有 编程 经 历 ， 并 想 要 通过 学 习 这 
角 开 始 理解 编程 。 








段 设 你 在 阅读 “你 不 知道 的 
几 本 书 从 JavaScript 这 个 视 

















第 1 章 总 结 了 深入 学 习 和 实践 编程 所 需要 的 知识 ， 此 外 还 有 许多 其 他 介绍 编程 的 优秀 资 
源 ， 这 些 资源 可 以 帮助 你 更 深入 地 探索 这 些 主题 。 除 了 第 1 章 的 知识 ， 我 建议 你 还 要 利用 


这 些 资料 来 更 深入 地 学 习 。 














在 熟悉 了 常用 的 基础 编程 概念 后 ， 第 2 音 将 帮助 你 熟悉 JavaScript 的 编程 风格 。 第 2 章 


介绍 了 JavaScript 的 含义 ， 但 再 次 声明 ， 这 并 不 是 完整 的 指 
JavaScript” 系 列 其 余 几 本 图 书 的 主旨 ! 











南 一 一 这 是 “你 不 知道 的 


如 果 你 已 经 对 JavaScript 有 了 一 定 的 了 解 ， 那 么 可 以 先 查 看 第 3 章 来 了 解 “你 不 知道 的 


JavaScript” 系 列 图 书 的 简介 ， 然 后 直接 阅读 你 所 感 兴趣 的 章节 1 
1.1 代码 
让 我 们 从 头 开 始 。 
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程序 常 被 称 为 源码 或 代码 ， 它 是 一 组 特定 的 指令 ， 用 来 指示 计算 机 要 执行 哪些 任务 。 虽 然 
对 JavaScript 来 说 可 以 直接 在 浏览 器 的 开发 者 终端 中 输入 代码 ， 但 代码 通常 会 被 保存 在 文 
本 文件 中 ， 我 们 将 在 后 文中 对 此 进行 简单 介绍 。 

指令 的 格式 和 组 合 规则 被 称 为 计算 机 语言 ， 有 时 也 被 称 为 语法 ， 这 非常 类 似 于 英语 中 告诉 
你 如 何 拼写 单词 以 及 如 何 使 用 单词 和 标点 符号 来 构造 有 效 的 句子 。 


语句 
在 计算 机 语言 中 ， 执 行 特定 任务 的 一 组 单词 、 数 字 和 运算 符 被 称 为 语句 。 在 JavaScript 中 ， 
一 条 语句 可 能 如 下 所 示 : 




















a=b* 2; 


其 中 的 字符 a 和 b 称 为 变量 (参见 1.7 节 )， 它 们 就 好 比 是 可 以 存放 东西 的 小 盒子 。 在 程序 
中 ， 变 量 保存 程序 要 使 用 的 值 (比如 数字 42)。 你 可 以 将 它们 想象 成 值 本 身 的 替代 符 。 


相 比 之 下 ，2 本 身 就 是 一 个 值 ， 称 为 字面 值 ， 因 为 它 独立 存在 而 没有 保存 在 变量 之 中 。 

其 中 的 字符 = 和 * 是 运算 符 (参见 1.4 节 )， 它 们 对 值 和 变量 执行 动作 ， 如 赋值 和 进行 乘法 
运算 。 

JavaScript 的 多 数 语句 都 是 以 分 号 ( ; ) 结尾 的 。 


粗略 地 说 ， 语 句 a = b * 2; 告诉 计算 机 获取 变量 b 的 当前 值 ， 然 后 将 这 个 值 乘 以 2， 再 将 
计算 结果 保存 到 另 一 个 名 为 a 的 变量 中 。 


程序 就 是 多 个 这 样 语句 的 集合 ， 它 们 合 起 来 描述 了 程序 要 执行 的 所 有 步骤 。 


1.2 表达 式 


语句 由 一 个 或 多 个 表达 式 组 成 。 一 个 表达 式 是 对 一 个 变量 或 值 的 引用 ， 或 者 是 一 组 值 和 变 
量 与 运算 符 的 组 合 。 


举例 来 说 ，a = b * 2; 这 个 语句 中 有 四 个 表达 式 。 


。 2 是 一 个 字面 值 表达 式 。 

。 b 是 一 个 变量 表达 式 ， 表 示 获 取 它 的 当前 值 。 

。 b * 2 是 一 个 算术 表达 式 ， 表 示 进 行 乘法 运算 。 

。 a = b * 2 是 一 个 赋值 表达 式 ， 意 思 是 将 表达 式 b * 2 的 结果 赋值 给 变量 a (我 们 将 在 
后 文中 深入 介绍 赋值 )。 






































一 个 独立 的 表达 式 也 可 以 称 为 表达 式 语句 ， 如 下 所 示 : 
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b * 2; 


这 种 表达 式 语 名 不 是 很 常用 ， 或 者 说 不 是 很 有 用 ， 因 为 它 通 常 不 会 对 程序 的 运行 起 到 任何 
作用 ， 它 只 是 取得 b 的 值 并 乘 以 2， 但 是 却 没有 对 结果 有 任何 影响 。 

更 常用 的 表达 式 语句 是 调用 表达 式 语句 (参见 1.11 闻 ) ， 因 为 整个 语句 本 身 就 是 一 个 函数 
调用 表达 式 : 























alert( a ); 


沪 行 程序 
这 些 编 程 语句 的 集合 是 如 何 通 知 计算 机 来 执行 任务 的 呢 ? 程序 需要 被 执行 ， 我 们 也 将 这 一 
过 程 称 为 运行 程序 。 


a = b * 2 这 样 的 语句 便于 开发 者 读 写 ， 但 实际 上 计算 机 并 不 能 直接 理解 这 种 形式 。 因 此 ， 
需要 通过 计算 机 上 一 个 专门 的 工具 (解释 器 或 编译 器 ) 将 你 编写 的 代码 翻译 成 计算 机 可 以 
理解 的 命令 。 


对 某 些 计算 机 语言 来 说 ， 在 程序 被 执行 时 ， 对 命令 的 翻译 通常 是 自 上 而 下 逐 行 执行 的 ， 这 
通常 被 称 为 代码 解释 。 
对 另外 一 些 语 言 来 说 ， 这 种 翻译 是 预先 进行 的 ， 这 样 一 来 ， 当 执行 程序 
时 ， 实 际 上 运行 的 是 已 经 编译 好 的 、 可 以 执行 的 计算 机 指令 


基本 上 可 以 说 JavaScript 是 解释 型 的 ， 因 为 每 次 执行 JavaScript 源码 时 都 需要 进行 处 理 。 但 这 
么 说 并 不 完全 精确 。JavaScript 引擎 实际 上 是 动态 编译 程序 ， 然 后 立即 执行 编译 后 的 代码 。 






























































有 关 JavaScript 编译 的 更 多 信息 ， 参 见 本 系列 《你 不 知道 的 JavaScript (上 
卷 )》 ' 第 一 部 分 中 的 前 两 章 。 


MY 


1.3 ”实践 


本 章 将 通过 简单 的 代码 片段 来 介绍 每 个 编程 概念 ， 这 些 代码 (当然 ) 是 用 JavaScript 编 
写 的 。 


非常 重要 的 一 点 是 ， 在 阅读 本 章 时 ， 你 应 该 通过 亲自 编写 代码 来 实践 每 个 概念 ， 并 且 你 
可 能 需要 花 一 点 时 间 反 复 阅 读本 章 。 最 简单 的 方法 是 ， 使 用 最 方便 的 浏览 器 (Firefox、 
Chrome、 正 等 ) 的 开发 者 工具 来 实践 。 




















注 1: 此 书 已 由 人 民 邮 电 出 版 社 出 版 。 一 一 编者 注 
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一 般 来 说 ， 你 可 以 通过 菜单 项 或 者 快捷 键 来 打开 开发 者 终端 。 有 关 在 你 喜欢 
的 浏览 器 中 打开 和 使 用 终端 的 更 多 详细 人 信息， 参见“ 掌握 开发 者 工具 终端 ” 
(http://blog.teamtreehouse.com/mastering-developer-tools-console ) 。 

如 果 要 在 终端 中 一 次 输入 多 行 ， 那 么 可 以 使 用 <shift>+<enter> 组合 键 来 另 
起 一 行 。 一 旦 点 击 <enter> 键 ， 终 端 会 立即 执行 已 输入 的 所 有 代码 。 


























我 们 来 熟悉 一 下 在 终端 中 运行 代码 的 流程 。 首 先 ， 建 议 你 在 浏览 嚣 中 打开 一 个 空白 的 标签 
页 。 我 更 喜欢 在 地 址 栏 中 输入 about:btank 来 实现 这 一 点 。 然 后 ， 确 保 你 的 开发 者 终端 是 
开启 状态 ， 就 像 我 们 之 前 提 到 的 那样 。 





现在 ， 输 入 如 下 代码 ， 并 观察 代码 的 执行 : 
a = 21; 
b=a* 2; 


console.log( b ); 





在 Chrome 浏览 器 的 终端 中 输入 前 面 的 代码 将 会 产生 如 下 所 示 的 输出 : 





Q Elements Network Sources » 汪 并 品 ,x 
© <topframe> vBPresevelog 
> a = 21; 

b=a* 2; 

console.log( b ); 

42 VM855:6 


. undefined 
> | 














你 可 以 自己 斌 一下。 学 习 编 程 的 最 好 方法 就 是 编写 代码 | 


1.3.1 输出 


在 前 面 的 代码 片段 中 ， 我 们 使 用 了 console.log(..)。 现 在 我 们 来 简单 了 解 一 下 这 行 代码 做 
了 些 什么 。 








可 能 你 已 经 猜 到 了 ， 这 就 是 我 们 在 开发 者 终端 打印 文本 〈 即 向 用 户 输出 ) 的 方法 。 我 们 应 
该 对 这 个 语句 的 两 点 解释 一 下 。 





首先 ，log( b ) 这 一 部 分 是 一 个 函数 调用 (参见 1.11 节 )。 我 们 将 变量 b 传 给 这 个 函数 ， 
请 求 它 将 b 的 值 打 印 到 终端 中 。 
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其 次 ，console. 这 一 部 分 是 1og(…) 函数 所 在 的 对 象 引用 。 我 们 将 在 第 2 章 中 深入 介绍 对 





创建 可 见 输 出 的 另外 一 个 方法 是 运行 alert(..) 语句 。 如 下 所 示 : 


alert( b ); 





如 果 运 行 这 个 语句 ， 那 么 你 就 会 发 现 输出 并 没有 打印 到 终端 中 ， 而 是 弹出 一 个 “OK” 对 话 框 ， 
变量 b 的 内 容 会 呈现 在 对 话 框 中 。 然 而 ， 在 终端 中 学 习 和 运行 程序 时 ， 使 用 console.1og(..) 
通常 比 使 用 alert(..) 更 加 方便 ， 因 为 这 样 无 需 与 浏览 器 界面 交互 就 可 以 一 次 输出 多 个 变量 。 


我 们 在 本 部 分 中 使 用 console.1log(..) 作为 输出 方法 。 


1.3.2 输入 
在 讨论 输出 的 同时 ， 你 可 能 也 会 好 奇 如 何 实现 输入 〈 即 如 何 接收 用 户 的 信息 )。 


最 常用 的 方法 是 ， 通 过 HTML 页 面向 用 户 显示 表 单元 素 (如 文本 框 ) 用 于 输入 ， 然 后 通过 
JavaScript 将 这 些 值 读 取 到 程序 变量 中 。 

















还 有 另 一 种 更 为 简单 的 获取 输入 的 方法 ， 用 于 简单 的 学 习 和 展示 ， 这 也 是 我 们 将 会 使 用 的 
方法 ， 即 prompt(..) 函数 : 


age = prompt( "Please tell me your age:" ); 


console.log( age ); 


你 可 能 已 经 猿 到 了 ， 传 给 prompt(..) 的 消息 会 打印 到 弹出 窗口 中 ， 本 例 中 是 "Please tell 


me your age:"。 





























如 下 图 所 示 : 
Q Elements Network Sources » 汪 这 上 加 ，x 
© 可 <topframe> v QD Preserve log 
> age = prompt( "Please tell me your age:" ); 
console. log( age ); 
> | 
JavaScript 
人 Please tell me your age: 
cancel | Ex 
8 | 第 1 章 
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输入 文本 并 点 击 “OK” 后 ， 你 就 可 以 看 到 输入 的 值 会 保存 到 变量 age 中 ， 接 着 通 
console.log(..) 输出 : 





Q Elements Network Sources » 六 这 器, x 
© 定 <topframe> v QD Preserve log 
> age = prompt( "Please tell me your age:" ); 

console. log( age ); 

35 VM848:4 


Undefined 
> | 











为 了 简化 难度 ， 在 学 习 基 本 编程 概念 时 ， 本 部 分 中 使 用 的 示例 都 不 需要 输入 。 但 既然 你 已 
经 学 习 了 如 何 使 用 prompt(..)， 如 果 想 要 挑战 自我 ， 你 可 以 在 自己 的 示例 中 使 用 输入 。 


1.4 运算 符 


使 用 运算 符 ， 我 们 可 以 对 变量 和 值 执行 操作 。 我 们 已 经 在 前 文中 看 到 了 = 和 * 这 两 个 
JavaScrit 运算 符 。 


运算 符 * 执行 算术 乘法 。 很 简单 ， 对 吧 ? 


学 号 运算 符 = 用 于 赋值 一 一 我 们 先 计算 = 右边 〈 源 值 ) 的 值 ， 然 后 将 它 存 人 左边 (目标 变 
) 指定 的 变量 中 。 























gm 绒 





这 种 赋值 方法 的 顺序 看 起 来 是 反 的 ， 有 点 奇怪 。 有 些 人 可 能 更 习惯 将 顺序 调 
过 来 ， 将 源 值 放 在 左边 ， 目 标 变量 放 在 右边 ,不 用 a = 42 这 种 形式 ， 而 是 
42 -> a (这 不 是 合法 的 JavaScript)。 但 问题 是 ，a = 42 这 种 顺序 以 及 类 似 的 
变 体 在 现代 编程 语言 中 是 非常 流行 的 。 如 果 感 觉 不 太 习 惯 的 话 ， 那 么 你 就 要 
花 点 时 间 来 习惯 它 ， 并 将 它 植 入 到 你 的 思维 中 。 

















考虑 : 


a 2 
b=a+tl; 


在 上 述 示例 中 ， 我 们 将 值 2 赋 给 变量 a。 然 后， 我 们 取得 变量 a 的 值 (仍然 是 2)， 加 上 1， 
得 到 结果 3， 再 将 这 个 值 保存 在 变量 b 中 。 


虽然 var 严格 意义 上 说 并 不 是 一 个 运算 符 ， 但 每 个 程序 都 会 用 到 这 个 关键 词 ， 因 为 它 是 声 
明 (也 就 是 创建 ) 变量 (参见 1.7 市 ) 的 基本 方法 。 
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在 使 用 变量 前 总 是 应 该 先 声 明 变量 。 一 个 变量 在 每 个 作用 域 (参见 1.11 节 ) 中 只 需要 声明 
一 次 ;声明 之 后 可 以 按照 需要 多 次 使 用 。 如 下 所 示 : 

var a = 20; 

a=a+1; 


= 2 
console.log( a ); // 42 


以 下 是 JavaScript 中 最 常用 的 一 些 运算 符 。 





。 赋值 
=， 如 3 = 2 就 表示 将 值 2 保存 在 变量 3 中 。 

。 算术 
+ (加 )、- ( 减 )、* ( 乘 )、/( 除 )， 如 a * 3。 

。 复合 赋值 
{=、-=、*= 和 /= 是 复合 运算 符 ， 可 以 将 算术 运算 符 与 赋值 组 合 起 来 ， 比 如 ，a += 2 等 


同 于 a =a+ 2。 
。 递增 /递减 
++ 表示 递增 ，- - 表示 递减 ， 比 如 at+ 就 类 似 于 a = a + 1。 


。 对 象 属性 访问 
如 console.1log() 中 的 .。 





























对 象 是 在 名 为 属性 的 位 置 中 持 有 其 他 值 的 值 。obj.a 指 的 是 一 个 名 为 obj 的 对 象 值 ， 并 
伴 有 一 个 属性 名 为 a 的 属性 。 也 可 以 通过 obj["a"] 这 种 形式 访问 属性 。 参 见 第 2 章 。 











。 相等 
== (粗略 相等 )、=== (严格 相等 )、!= (粗略 不 等 ) 和 !== (严格 不 等 )， 如 a == b。 


参见 2.1 节 。 


。 比较 
< (小 于 )、> (大 于 )、<= (小 于 或 粗略 等 于 ) 和 >= (大 于 或 粗略 等 于 )， 如 a <= b。 


参见 2.1 节 。 


。 逻辑 
8&& (与 ) 和 1| (或 )， 如 a 11 b 就 表示 3 或 者 b。 


这 些 运算 符 用 于 表示 复合 条 件 (参见 1.9 市 )， 比 如 a 或 b 为 真 。 
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有 关 运 算 符 的 更 多 细节 以 及 这 里 没有 覆盖 到 的 更 多 介绍 ， 参 见 Mozilla 开发 
者 网 络 的 “表达 式 与 运算 符 ”(https://developer.mozilla.org/en-US/docs/Web/ 


JavaScript/Guide/Expressions_and_Operators ) 。 





1.5 值 与 类 型 

如 果 你 向 手机 店 的 店员 咨询 某 款 手机 的 价格 ， 他 会 回答 说 “99.99”( 也 就 是 99.99 美元 )， 
那么 他 给 你 的 是 一 个 实际 的 美元 数 ， 表 示 购 买 手 机 需要 付 的 金额 (加 上 税 )。 如 果 你 想 要 
买 两 部 这 款 手 机 ， 那 么 可 以 很 容易 地 算出 价格 为 199.98 美元 。 

如 果 这 个 店员 拿 起 另 一 个 类 似 的 手机 ， 声 称 它 是 “免费 的 ”( 很 可 能 要 签约 ) ， 这 时 他 并 没 
有 给 出 一 个 具体 的 数字 ， 而 是 价格 ($0.00) 的 另外 一 种 表示 方法 一 一 “免费 ”。 








接着 ， 如 果 你 询问 手机 是 否 附带 充电 器 ， 那 么 你 得 到 的 答案 只 会 是 “是 ”或 “ 否 ”。 

同样 ， 当 在 程序 中 表达 某 些 值 时 ， 根 据 将 对 这 些 值 进行 的 操作 ， 你 可 以 为 这 些 值 选择 不 同 
的 表示 方法 。 

在 编程 术语 中 ， 对 值 的 不 同 表示 方法 称 为 类 型 。JavaScript 为 以 下 这 些 基本 值 提供 了 内 置 
类 型 。 
。 在 计算 时 ， 你 需要 的 是 一 个 数字 (number)。 


。 在 屏幕 上 打印 一 个 值 时 ,你 需要 的 是 一 个 字符 串 (string, 一 个 或 多 个 字符 .单词 或 句子 ) 。 
。 在 程序 中 作出 决策 时 ， 你 需要 的 是 一 个 布尔 值 (bootean，true 或 者 false)。 














直接 包含 在 源码 中 的 值 被 称 为 字面 值 。 字 符 串 字面 值 由 双 引 号 ("...") 或 单 引 号 ('…') 转 
住 ， 二 者 的 唯一 区 别 只 是 风格 不 同 。 数 字 和 布尔 型 字面 值 可 以 直接 表示 (如 42、true 等 )。 


考虑 : 





"I am a string"; 
'I am also a string'; 


42; 


true; 
false; 


除了 字符 串 /数字 /布尔 值 类 型 编程 语 
本 章 和 下 一 章 中 更 深入 地 介绍 值 和 类 型 。 


类 型 转换 


如 果 需 要 在 屏幕 上 打印 出 一 个 数字 ， 那 么 就 需要 将 这 个 值 转化 为 字符 串 ， 在 JavaScript 中 ， 


JI 


通常 还 会 提供 数组 、 对 象 、 函 数 等 。 我 们 将 在 
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这 种 转化 称 为 “类 型 转换 "。 类 似 地 ， 如 果 向 电子 商务 网 页 的 表单 中 输入 一 系列 数字 字符 ， 
那么 这 都 是 字符 串 ， 但 如 果 需 要 使 用 这 些 值 进 行 数学 计算 ， 则 需要 将 其 转换 为 数字 。 


JavaScript 为 类 型 间 的 强制 转换 提供 了 几 种 不 同 的 机 制 。 举 例 来 说 : 

















var a = "42 ; 
var b = Number(a); 


console.log( a ); // "42" 
console.log( b ); // 42 


如 上 所 示 ，Nunber(..) (一 个 内 置 函数 ) 的 使 用 是 一 种 显 式 的 类 型 转换 ， 可 以 将 任意 类 型 
转换 为 数字 类 型 。 这 应 该 是 很 直观 的 。 

但 是 ， 如 果 需 要 进行 比较 的 是 不 同类 型 的 两 个 值 ， 那 么 会 怎么 样 呢 ? 这 就 是 一 个 很 有 争议 
的 问题 了 ， 需 要 隐 式 的 类 型 转换 。 

如 果 要 比较 字符 串 "99.99" 和 数字 99.99， 多 数 人 会 认为 它们 是 相等 的 ， 但 它们 其 实 并 不 完 
全 相同 ， 难 道 不 是 四 ?它们 是 两 种 表示 方法 下 的 同一 个 值 ， 属 于 两 种 不 同 的 类 型 。 你 可 以 
说 它们 是 “粗略 相等 "， 是 这 样 吗 ? 




















为 了 帮助 你 处 理 这 些 常 见 的 情形 ，JavaScript 有 时 会 隐 式 地 将 值 转换 到 匹配 的 类 型 。 


因此 ， 如 果 你 使 用 == 粗略 相等 运算 符 来 判断 "99.99" == 99.99 是 否 成 立 ，JavaScript 会 将 
左边 的 "99.99" 转换 为 等 价 的 数字 类 型 99.99。 这 时 比较 就 变 成 了 99.99 == 99.99， 当 然 
为 true 了。 








尽管 隐 式 类 型 转换 的 设计 意图 是 为 了 提供 便利 ， 但 如 果 你 没有 花 时 间 学 习 其 行为 方式 的 规 
则 的 话 ， 它 也 可 能 会 产生 误导 。 而 多 数 JavaScript 开发 者 从 来 没有 花 时 间 来 学 习 这 一 知识 ， 
所 以 他 们 普遍 感觉 隐 式 类 型 转换 令 人 迷惑 ， 并 且 会 让 程序 产生 出 平 意 料 的 bug。 他 们 认为 
应 该 尽量 避免 隐 式 类 型 转换 。 隐 式 类 型 转换 甚至 被 称 为 是 语言 设计 中 的 缺陷 。 

然而 ， 隐 式 类 型 转换 是 可 以 学 习 的 机 制 ， 任 何 想 要 严肃 对 待 JavaScript 编程 的 人 都 应 该 学 
习 。 不 仅仅 是 因为 一 旦 掌握 了 其 规则 ， 就 不 会 再 被 它 迷 惑 ， 实 际 上 这 也 可 以 提高 你 的 程序 
质量 ! 所 以 为 此 付出 努力 是 十 分 值得 的 。 






































有 关 类 型 转换 的 更 多 信息 ， 参 见 下 一 章 和 本 系列 《你 不 知道 的 JavaScript (中 
卷 )》 第 一 部 分 中 的 第 4 章 。 




















注 2: 此 书 已 由 人 民 邮 电 出 版 社 出 版 。 一 一 编者 注 
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1.6 ”代码 注释 

手机 商店 的 店员 可 能 会 草草 记 下 新 发 布 手机 的 特性 或 者 其 公司 提供 的 新 套餐 。 这 些 笔 记 只 
是 给 店员 看 的 ， 而 不 是 给 顾客 阅读 的 。 然 而 ， 通 过 记录 要 向 顾客 提供 的 信息 以 及 提供 方 
式 ， 这 些 笔 记 可 以 帮助 店员 提高 自己 的 工作 质量 。 

这 里 可 以 学 到 的 最 重要 的 一 点 是 ， 编 写 代 码 并 不 只 是 为 了 给 计算 机 看 。 在 给 计算 机 看 的 同 
时 ， 代 码 同样 要 给 开发 者 阅读 。 


























计算 机 只 关心 机 器 码 ， 也 就 是 那些 编译 之 后 得 到 的 二 进 制 0 和 1 序列。 要 想得到 同样 的 0 
和 1 序列， 几乎 有 无 数 种 程序 写法 。 而 你 选择 的 程序 编写 方案 很 重要 ， 这 不 只 是 对 你 个 人 
来 说， 对 小 组 的 其 他 成 员 ， 甚 至 对 未 来 的 你 也 同样 很 重要 。 

写 程序 时 不 仅 应 该 努力 做 到 让 程序 能 够 正确 执行 ， 而 且 应 该 做 到 使 代码 阅读 起 来 也 是 容 
易 理解 的 。 你 可 能 需要 花费 很 多 精力 为 变量 (参见 1.7 市 ) 和 函数 (参见 1.11 节 ) 选择 一 
个 好 的 名 字 。 
男 一 个 非常 重要 的 部 分 是 代码 注释 。 这 是 程序 中 的 文本 ， 将 其 插入 程序 只 是 为 了 向 人 类 解 
释 说 明代 码 的 执行 。 解 释 器 / 编译 器 会 名 略 这 些 注释 。 
有 关 如 何 编 写 注释 良好 的 代码 有 很 多 种 观点 ， 我 们 确实 无 法 定义 绝对 的 普遍 标准 。 但 是 以 
下 这 些 观察 结论 和 指导 原则 是 很 有 用 的 。 














EE 






































。 没有 注释 的 代码 不 是 最 优 的 。 

。 过 多 注释 (比如 每 行 一 个 ) 可 能 是 拙劣 代码 的 征兆 。 

。 代码 应 该 解释 为 什么 ， 而 非 是 什么 。 如 果 编 写 的 代码 特别 容易 令 人 迷惑 的 话 ， 那 么 注释 
也 可 以 解释 一 下 实现 原理 。 








JavaScript 中 的 广 释 有 两 种 类 型 : 单行 注释 和 多 行 注释 。 
考虑 : 


// 这 是 一 个 单行 注释 








/* 而 这 是 
一 个 多 行 
注释 。 
和 
如 果 想 要 将 注释 放 到 单个 语句 上 方 或 者 一 行 的 末尾 ， 那 么 可 以 使 用 单行 注释 //。 这 一 行 中 
位 于 // 之 后 直到 行 尾 的 所 有 内 容 都 会 被 当 作 注释 (因此 会 被 编译 器 忽略 )。 单 行 注释 的 内 
容 没 有 限制 。 
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考虑 : 
var a = 42; // 42 是 生命 的 意义 
多 行 注释 /* .. */ 适用 于 在 注释 中 需要 多 行 解释 的 情况 。 


以 下 是 多 行 注释 常用 的 一 个 场景 : 








/* 使 用 下 面 的 值 是 因为 
可 以 看 到 它 回 答 了 
宇宙 中 所 有 的 问题 */ 


var a = 42; 




















多 行 注释 也 可 以 出 现在 行 中 的 任意 位 置 ， 其 至 可 以 出 现在 行 中 间 ， 因 为 */ 会 结束 注释 。 
如 下 所 示 : 








var a = /* 任意 值 */ 42; 





console.log( a ); // 42 





唯一 不 能 出 现在 多 行 注释 中 的 是 */， 因 为 这 会 被 解释 为 注释 的 结束 。 

开始 学 习 编程 时 一 定 要 养 成 注释 代码 的 习惯 。 在 本 章 后 面 的 内 容 中 ， 你 会 看 到 我 使 用 注释 
来 进行 解释 ， 所 以 你 在 自己 的 练习 中 也 应 该 这 么 做 。 相 信 我 ， 如 果 你 这 么 做 的 话 ， 每 个 陪 
读 你 代码 的 人 都 会 感谢 你 的 ! 


CC 





























1.7 变量 


大 多 数 的 实用 程序 都 需要 跟踪 值 的 变化 ， 因 为 程序 在 执行 任务 时 会 对 值 进行 各 种 操作 ， 值 
会 不 断 发 生变 化 。 

在 程序 中 实现 这 一 点 的 最 简单 方法 是 将 值 赋 给 一 个 符号 容器 ， 这 个 符号 容器 称 为 变量 ,使 
用 这 个 名 字 是 因为 这 个 容器 中 的 值 是 可 以 变化 的 。 








在 某 些 编程 语言 中 ， 你 需要 声明 一 个 变量 (容器 ) 用 于 存放 指定 类 型 的 值 (如 数字 或 字符 
串 )。 通 过 避免 不 想 要 的 值 转换 ， 人 们 认为 这 种 静态 类 型 (也 称 为 类 型 强制 ) 提高 了 程序 
的 正确 性 。 


其 他 语言 强调 的 是 值 的 类 型 而 不 是 变量 的 类 型 。 弱 类 型 (也 称 为 动态 类 型 ) 允许 一 个 变量 
在 任意 时 刻 存 放任 意 类 型 的 值 。 这 种 方式 允许 一 个 变量 在 程序 的 逻辑 流 中 的 任意 时 刻 代 表 
任意 类 型 的 值 ， 人 们 认为 这 样 可 以 提高 程序 的 灵活 性 。 












































JavaScript 采用 了 后 一 种 机 制 一 一 动态 类 型 ， 这 也 就 是 说 ， 变 量 可 以 持 有 任意 类 型 值 而 不 
存在 类 型 强制 。 
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前 面 提 到 过 ， 我 们 使 用 var 语句 声明 一 个 变量 。 注 意 ， 声 明 中 没有 额外 的 类 型 信息 。 考 虑 
以 下 这 个 简单 的 程序 : 

Var amount = 99.99; 

amount = amount * 2; 


console.log( amount ); // 199.98 


// 将 amount 转化 为 一 个 字符 串 ， 并 在 开头 添加 "$" 


amount = "$" + String( amount ); 





console.log( amount ); // "$199.98" 





冯 











变量 amount 开始 时 持 有 值 99.99， 然 后 持 有 amount * 2 的 结果 值 ， 也 就 是 199.98。 


第 一 个 console.log(..) 命令 需要 隐 式 地 转换 类 型 ， 将 数字 值 转换 为 字符 串 用 于 和 输出。 





然后 语句 amount = "$" + String(amount) 显 式 地 将 值 199.98 转换 为 字符 串 ， 并 在 开头 加 
上 字符 "$"。 此 时 ，amount 持 有 字符 串 值 "$199.98"， 所 以 第 二 个 console.log(..) 语句 打 
印 输出 时 就 不 需要 转换 类 型 了 。 





JavaScript 开发 者 应 该 注意 到 变量 amount 表示 值 99.99、199.98 和 "$199.98" 的 这 种 灵活 
性 。 静 态 类 型 的 狂热 支持 者 可 能 会 单独 使 用 一 个 变量 ， 例 如 ， 使 用 amountstr 来 保存 最 后 
的 "$199.98"， 因 为 这 是 一 个 不 同 的 类 型 。 


无 论 是 哪 一 种 方式 ， 你 都 会 注意 到 amount 保存 的 值 会 随 着 程序 运行 而 有 所 变化 ， 这 展示 了 
变量 的 主要 用 途 : 管理 程序 状态 。 

换 句 话说 ， 状 态 跟 踪 了 值 随 着 程序 运行 的 变化 。 

变量 的 另 一 个 常见 用 法 是 集中 设置 值 。 更 常见 的 说 法 是 常量 ， 即 声明 一 个 变量 ， 赋 了 予 一 个 
特定 值 ， 然 后 这 个 值 在 程序 执行 过 程 中 保持 不 变 。 

这 些 常 量 的 声明 通常 放 在 程序 的 开头 ， 所 以 如 果 需 要 改变 这 些 值 的 话 ， 那 么 就 会 有 一 个 很 
方便 的 集中 位 置 。 通 常 来 说 ， 在 JavaScript 中 作为 常量 的 变量 用 大 写 表示 ， 多 个 单词 之 间 
用 下 划 线 - 分 隔 。 














以 下 是 一 个 简单 的 示例 : 





var TAX_RATE = 0.08; // 8% 的 营业 税 
Var amount = 99.99; 
amount = amount * 2; 


amount = amount + (amount * TAX_RATE); 
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console.log( amount ); // 215.9784 
console.log( amount.toFixed( 2 ) ); // "215.98" 


console.log(..) 是 作为 console 值 的 一 个 对 象 属 性 的 函数 tog(..)， 与 此 类 
似 ，toFixed(..) 是 一 个 可 以 通过 数字 值 访问 的 函数 。JavaScript 的 数字 不 会 
自动 格式 化 为 美元 表示 法 ， 因 为 引擎 无 法 了 解 你 的 意图 ， 也 没有 适合 现金 的 
类 型 。toFixed(..) 可 以 帮助 我 们 指定 保留 数字 小 数 点 后 的 几 位 ， 并 按照 期 
望 生成 字符 串 值 。 

















变量 TAX_RATE 是 依靠 惯例 而 定 的 一 个 常量 ， 程 序 中 没有 任何 特殊 实现 可 以 防止 它 被 修改 。 
而 如 果 这 个 城市 的 营业 税 提高 到 9%， 那 么 我 们 可 以 很 容易 地 修改 程序 ， 只 需要 在 唯一 一 
处 修改 TAX_RATE 值 为 6.099， 而 不 是 在 程序 中 搜索 多 个 9.08， 然 后 修改 所 有 的 值 。 





在 编写 本 部 分 时 ， 最 新 版 本 的 JavaScript (一 般 被 称 为 “ES6”) 提供 了 一 个 新 的 常量 声明 
方法 ， 使 用 const 代替 了 var: 


// 自 ES6 起 : 
const TAX_RATE = 0.08; 





var amount = 99.99; 
A ms 
常量 和 值 不 变 的 变量 一 样 有 用 ， 而 且 和 常量 还 可 以 防止 值 在 最 初 设 定 后 被 无 意 修 改 。 如 果 想 


要 在 初始 声明 后 给 TAX_RATE 赋 其 他 值 ， 那 么 程序 会 拒绝 这 个 修改 (严格 模式 下 会 失败 退 
出 ， 参 见 2.4 节 )。 





另外 ， 这 种 防止 出 错 的 “保护 ”措施 与 静态 类 型 相似 ， 所 以 你 应 该 可 以 理解 其 他 语言 中 的 
静态 类 型 是 多 么 具有 吸引 力 了 ! 


有 关 如 何在 程序 中 使 用 变量 中 的 不 同 值 ， 参 见 本 系列 《你 不 知道 的 JavaScript 
(中 卷 )》 第 一 部 分 中 的 前 两 章 。 





1.8 块 
当 你 选 购 好 新 手机 而 结账 时 ， 手 机 商店 的 店员 必须 完成 一 系列 的 步骤 。 


与 此 类 似 ， 我 们 常常 需要 将 在 代码 中 的 一 系列 语句 组 织 到 一 起 ， 这 些 语句 通常 被 称 为 块 。 
在 JavaScript 中 ， 使 用 一 对 大 括号 { .. } 在 一 个 或 多 个 语句 外 来 表示 块 。 考 虑 : 


var amount = 99.99; 
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// 一 个 通用 的 块 
{ 


amount = amount * 2; 
console.log( amount );  // 199.98 
} 


这 种 独立 的 { .. } 块 是 合法 的 ， 但 在 JavaScript 程序 中 比较 少见 。 通 常 来 说 ， 块 会 与 其 
他 某 个 控制 语句 组 合 在 一 起 ， 比 如 if 语句 (参见 1.9 节 ) 或 循环 (参见 1.10 节 )。 举 例 
来 说 : 

var amount = 99.99; 


// amount 是 否 足够 大 呢 ? 

if (amount > 10) { // <-- 块 与 if 组 合 
amount = amount * 2; 
console.log( amount );  // 199.98 

} 


我 们 将 在 下 一 市 中 介绍 if 语句 ， 但 正如 你 可 以 看 到 的 ， 包 含 两 个 语句 的 { .. } 块 与 if 
(amount > 10) 结合 在 一 起 了 ; 块 内 的 语句 只 有 在 条 件 判 断 成 立时 才 会 运行 。 





与 console.log( amount ); 这 样 的 大 多 数 其 他 语句 不 同 ， 块 语句 不 需要 以 分 
号 (;) 结尾 。 


1.9 条 件 判断 


“您 想 要 再 加 一 个 价值 $9.99 的 屏幕 保护 膜 吗 ? ”手机 商店 的 店员 这 么 问 就 是 在 请 你 作出 一 
个 决定 。 你 可 能 会 先 看 看 钱包 或 银行 账号 的 当前 状态 再 回答 这 个 问题 。 但 显然 ， 这 只 是 一 
个 简单 的 “是 ”或 “ 否 ” 的 问题 。 























程序 中 有 很 多 种 方法 可 以 用 于 表示 条 件 判断 (也 就 是 决策 )。 

















最 常用 的 是 if 语句 。 本 质 上 就 是 在 表达 “如 果 这 个 条 件 是 真 的， 那么 进行 后 续 这 些 ……”。 
举例 来 说 : 


var bank_balance = 302.13; 
var amount = 99.99; 


if (amount < bank_balance) { 
console.log( "I want to buy this phone!" ); 


} 


if 语句 要 求 在 括号 ( ) 中 放 一 个 表达 式 ， 这 个 表达 式 要 么 是 true， 要 么 是 false。 在 这 个 程 
序 中 ， 我 们 提供 的 表达 式 是 amount < bank_balance， 根 据 bank_balance 变量 中 的 数量 ， 其 求 
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值 结果 确实 是 true 或 者 false。 
你 还 可 以 提供 一 个 用 于 if 条 件 不 为 真 时 的 选择 ， 我 们 将 其 称 为 else 语句 。 考 虑 : 
const ACCESSORY_PRICE = 9.99; 


var bank_balance = 302.13; 
Var amount = 99.99; 


amount = amount * 2; 











// 是 否 可 以 提供 额外 的 购买 ? 

if ( amount < bank_balance ) { 
console.log( "I'LL take the accessory!" ); 
amount = amount + ACCESSORY_PRICE; 





| 
// 否则 : 
else { 
console.log( "No, thanks." ); 


} 


在 以 上 的 示例 中 ， 如 果 amount < bank_balance 为 真 ， 那 么 就 会 打印 出 "I'1l take the 
accessory!"， 并 在 变量 amount 上 加 上 9.99。 否 则 ，else 语句 就 会 礼貌 地 回答 "No，thanks."， 
并 保持 amount 不 变 。 








正如 我 们 在 1.5 节 中 讨论 的 那样 ， 不 满足 期 望 类 型 的 值 通常 会 被 强制 转换 为 需要 的 类 型 。 
话语 句 需要 布尔 型 的 值 ， 如 果 传 递 的 值 是 非 布尔 型 的 ， 那 么 就 会 发 生 类 型 转换 。 


JavaScript 定义 了 一 系列 特定 的 值 ， 这 些 值 在 强制 转换 为 布尔 型 时 会 被 认为 是 “ 假 的 "， 它 
们 会 转化 为 false， 基 中 包括 86 和 "" 这 样 的 值 。 任 何不 在 这 个 列表 中 的 其 他 值 会 自动 成 为 
“ 真 的 "， 因 此 在 强制 转换 为 布尔 型 时 会 转化 为 true。 真 值 包括 99.99 和 "free" 这 样 的 值 。 
要 想 获得 更 多 信息 ， 参 见 2.1.3 节 中 的 “ 真 与 假 ”部 分 。 


除 if 之 外 ， 还 有 其 他 形式 的 条 件 判断 。 比 如 ，switch 语句 可 以 用 作 一 组 if. .else 语句 的 
简写 (参见 第 2 章 )。 循 环 (参见 1.10 市 ) 通过 一 个 条 件 判断 来 确定 是 继续 还 是 停止。 












































有 关 测试 条 件 判断 时 可 能 隐 式 发 生 的 类 型 转换 的 更 多 信息 ， 参 见 本 系列 《你 
不 知道 的 JavaScript (中 卷 )》 第 一 部 分 中 的 第 4 章 。 


1.10 循环 


商店 忙碌 时 会 有 一 个 等 候 服 务 的 顾客 队列 。 如 果 这 个 队列 中 还 有 顾客 ， 那 么 店员 就 要 继续 
为 下 一 位 顾客 服务 。 


重复 一 系列 动作 ， 直 到 不 满足 某 个 条 件 ， 换 名 话说， 重复 只 发 生 在 满足 条 件 的 情况 下 ， 这 
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就 是 程序 循环 的 工作 ， 循 环 有 多 种 形式 ， 但 都 满足 基本 的 行为 特性 。 
循环 包括 测试 条 件 以 及 一 个 块 (通常 就 是 { .. ])。 循 环 块 的 每 次 执行 被 称 为 一 个 迭代 。 
比如 ，while 循环 和 do. .while 循环 形式 展示 了 重复 一 个 语句 块 直到 一 个 条 件 判断 求 值 不 再 


为 真 这 个 概念 : 





while (numOfCustomers > 0) { 
console.log( "How may I help you?" ); 


// 帮助 顾客 …… 


numOfCustomers = numOfCustomers - 1; 


// 对 比 : 


do { 
console.log( "How may I help you?" ); 


// 帮助 顾客 …… 


numOfCustomers = numOfCustomers - 1; 
} while (numOfCustomers > 0); 





这 些 循 环 之 间 的 唯一 实际 区 别 是 ， 条 件 判 断 在 第 一 次 迭代 执行 前 (while) 检查 还 是 在 第 一 
次 迭代 后 (do. .while) 检查 。 


不 管 是 哪 种 形式 ， 如 果 条 件 判断 测试 结果 为 fatse， 那 么 都 不 会 运行 下 一 轮 选 代 。 这 意味 
着 ， 如 果 第 一 次 的 条 件 判断 为 fatse， 那 么 whitte 循环 就 不 会 执行 ， 而 do. .whtte 循环 只 会 
运行 一 次 。 
































有 时 循环 要 在 一 组 数字 上 迭代， 比如 从 6 到 9 (10 个 数字 )。 你 可 以 设置 一 个 i 这 样 的 循 
环 迭 代 变 量 ， 初 始 为 6， 然 后 每 次 迭代 增加 1。 


出 于 多 种 历史 原因 ， 编 程 语 言 几乎 总 是 从 零 开始 计数 ， 也 就 是 说 ， 是 从 9 而 
不 是 从 1 开始 。 如 果 不 熟 悉 这 种 思维 模式 的 话 ， 一 开始 可 能 会 感到 非常 迷 
惑 。 花 点 时 间 进 行 从 9 开始 的 计数 训练 ， 并 适应 这 一 点 。 

















条 件 判断 会 在 每 次 迭代 时 测试 ， 这 就 好 像 是 在 循环 内 部 有 一 个 隐 式 的 if 语句 。 





我 们 可 以 通过 JavaScript 的 break 语句 来 结束 循环 。 男 外 ， 我 们 也 可 以 看 到 ， 很 容易 就 会 
创建 出 一 个 如 果 不 使 用 break 机 制 就 会 陷入 死 循 环 的 循环 。 


举例 来 说 : 











var i = 0; 
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1/ white..true 循 环 会 永久 运行 ， 不 是 吗 ? 
while (true) { 
// 停止 循环 ? 
if ((i <= 9) === false) { 
break; 


} 


console. log(i); 
i=i+l1; 
} 
//0123456789 





这 并 非 是 你 在 自己 的 程序 中 一 定 要 效仿 的 一 个 实际 循环 形式 。 在 这 里 展示 只 
是 为 了 说 明 问 题 。 








虽然 使 用 white (或 者 do. .white) 循环 也 可 以 手动 完成 任务 ， 但 还 有 一 个 专门 为 此 设计 的 
语法 形式 ， 我 们 将 其 称 为 for 循环 : 


for (var i = 0; i <= 9; i=i+1)t 
console.log( i ); 


//0123456789 


在 上 述 的 示例 中 可 以 看 到 ， 两 种 情况 下 条 件 i <= 9 对 于 前 十 次 迭代 都 为 true， 但 当 fi 为 
10 时 会 变 为 faLse。 


for 循环 有 3 个 分 句 : 初始 化 分 句 (var 1 = 09)、 条 件 测 试 分 名 (i <= 9)， 以 及 更 新 分 句 
(i = + 1)。 所 以 ， 如 果 你 需要 在 循环 迭代 中 计数 ， 那 么 最 紧凑 、 最 容易 理解 和 编写 的 形 
式 就 是 for 循环 。 

还 有 其 他 一 些 特殊 的 循环 形式 ， 专 门 用 于 在 特定 的 值 上 迭代 ， 比 如 对 象 属性 〈 参 见 第 2 
章 )， 其 中 隐 式 的 测试 条 件 为 是 否 所 有 的 属性 都 已 经 处 理 完毕 。 无 论 循 环 的 形式 是 什么 ， 
“循环 到 条 件 为 否 ” 这 个 概念 是 保持 不 变 的 。 


1.11 函数 

手机 商店 的 店员 应 该 不 会 随身 携带 计算 器 来 计算 税 费 和 最 后 的 应 付 金额 。 这 个 任务 是 她 需 
要 定义 一 次 并 多 次 复 用 的 。 很 有 可 能 的 是 ， 公 司 的 收银 设备 (计算 机 或 平板 等 ) 内 置 了 这 
类 似 地 ， 你 的 程序 也 几乎 总 是 需要 将 代码 的 任务 分 割 成 可 复 用 的 片段 ， 而 不 是 一 直 重复 编 
码 。 实 现 这 一 点 的 方法 就 是 定义 一 个 函数 。 
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通常 来 说 ， 函 数 是 可 以 通过 名 字 被 “调用 ”的 已 命名 代码 段 ， 每 次 调用 ， 其 中 的 代码 就 会 
运行 。 考 


function printAmount() { 
console.log( amount.toFixed( 2 ) ); 


} 

var amount = 99.99; 
printAmount(); // "99.99" 
amount = amount * 2; 


printAmount(); // "199.98" 


函数 可 以 接受 参数 ， 即 你 传 入 的 值 ， 也 可 以 返回 一 个 值 : 














function printAmount(amt) { 
console.log( amt.toFixed( 2 ) ); 


} 


function formatAmount() { 
return "$" + amount.toFixed( 2 ); 


} 
Var amount = 99.99; 
printAmount( amount * 2 ); // "199.98" 


amount = formatAmount(); 
console.log( amount ); // "$99.99" 


国 数 printAmount(..) 接受 一 个 名 为 ant 的 参数 。 国 数 formatAmount() 返回 一 个 值 


可 以 在 同一 个 函数 中 同时 使 用 这 两 种 技术 。 














。 你 也 


通常 来 说 ， 你 会 在 计划 多 次 调用 的 代码 上 使 用 函数 ， 但 只 是 将 相关 的 代码 组 织 到 一 起 成 为 


命名 集合 也 是 很 有 用 的 ， 即 使 只 准备 调用 一 次 。 
考虑 : 


const TAX_RATE = 0.08; 





function calculateFinalPurchaseAmount(amt) { 


// 根据 税 费 来 计算 新 的 数值 
amt = amt + (amt * TAX_RATE); 








// 返回 新 的 数值 
return amt; 


} 


var amount = 99.99; 
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amount = calculateFinalPurchaseAmount( amount ); 


console.log( amount.toFixed( 2 ) ); // "107.99" 


尽管 calculateFinalPurchaseAmount(..) 只 被 调用 了 一 次 ,但 将 它 的 行为 组 织 到 一 个 独立 
的 命名 函数 中 使 得 使 用 其 逻辑 (amount = calculateFinal... 语句 ) 的 代码 更 为 清晰 。 函 
数 中 的 语句 越 多 ， 其 效果 就 会 越 明显 。 


作用 域 

如 果 你 向 手机 商店 的 店员 询问 的 手机 型 号 是 该 商店 里 没有 的 ， 那 么 她 也 就 无 法 将 你 想 要 的 
手机 卖 给 你 。 她 只 能 接触 到 商店 里 现 有 的 手机 。 你 也 就 不 得 不 到 另外 一 家 商店 尝试 看 看 能 
否 找 到 你 想 要 的 手机 型 号 了 。 

编程 中 的 一 个 术语 可 以 表示 这 个 概念 : 作用 域 (严格 说 是 词法 作用 域 )。 在 JavaScript 中 ， 
每 个 函数 都 有 自己 的 作用 域 。 作 用 域 基 本 上 是 变量 的 一 个 集合 以 及 如 何 通 过 名 称 访问 这 些 
变量 的 规则 。 只 有 函数 内 部 的 代码 才能 访问 这 个 函数 作用 域 中 的 变量 。 














同一 个 作用 域内 的 变量 名 是 唯一 的 ， 所 以 不 能 有 两 个 变量 a 一 个 接 一 个 地 放 在 一 起 。 但 
是 ， 同 一 个 变量 名 a 可 以 出 现在 不 同 的 作用 域 中 : 





function one() { 
// 这 个 a 只 属于 one() 函 数 
var a= 1; 
console.log( a ); 


} 




















function two() { 
// 这 个 a 只 属于 two() 函 数 
Var a=2; 
console.log( a ); 


} 


one(); // 1 
two(); // 2 


此 外 ， 作 用 域 是 可 以 彼此 髓 套 的 ， 就 好 像 生 日 聚会 上 的 小 丑 可 以 在 一 个 气球 内 部 吹 起 另 一 
个 气球 那样 。 如 果 一 个 作用 域 岁 套 在 另外 一 个 作用 域内 ， 那 么 内 层 作 用 域 中 的 代码 可 以 访 
问 这 两 个 作用 域 中 的 变量 。 


考虑 : 




















function outer() { 
var a= 1; 


function inner() { 
var b = 2; 
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// 这 里 我 们 既 可 以 访问 a， 也 可 以 访问 b 
console.log( a + b ); /3 








} 


inner(); 


// 这 里 我 们 只 能 访问 a 
console.log( a ); // 1 


} 


outer(); 





词法 作用 域 的 规则 表明 ， 一 个 作用 域内 的 代码 可 以 访问 这 个 作用 域内 以 及 任何 包围 在 它 之 
外 的 作用 域 中 的 变量 。 


因此 ，inner() 函数 内 部 的 代码 可 以 访问 变量 a 和 b， 但 是 outer() 中 的 代码 只 能 访问 a， 
不 能 访问 b， 因 为 这 个 变量 b 只 在 inner() 函数 内 部 。 


我 们 来 回顾 一 下 前 面 的 代码 片段 : 











const TAX_RATE = 0.08; 


function calculateFinalPurchaseAmount(amt) { 


// 根据 税 费 来 计算 新 的 数值 
amt = amt + (amt * TAX_RATE); 


// 返回 新 的 数值 


return amt; 





} 


因为 词法 作用 域 的 缘故 ， 我 们 可 以 从 函数 calculateFinalPurchaseAmount(..) 的 内 部 访问 
常量 (变量 ) TAX_RATE， 尽 管 我 们 并 没有 将 它 传递 进去 。 








ae le 参见 本 系列 《你 不 知道 的 JavaScript (上 卷 )》 
第 一 部 分 中 的 前 三 





1.12 ”实践 
在 编程 学 习 中 ， 实 践 是 绝对 无 法 替代 的 。 无 论 我 如 何在 这 里 前 释 说 明 ， 理 论 都 无 法 让 你 
为 一 个 程序 员 。 


谨 记 这 一 点 。 我 们 来 尝试 针对 在 本 章 中 学 习 到 的 概念 进行 一 些 练习 。 我 会 给 出 “需求 ”， 
你 先 试 着 解决 这 些 “ 需 求 "。 然 后 查看 以 下 列 出 的 代码 ， 看 看 我 是 如 何 解 决 的 。 





。 编写 程序 以 计算 购买 手机 所 需 的 总 金额 。 你 需要 一 直 购 买 手机 (提示: 循环 ! ) 直到 银行 
账号 中 的 资金 不 足 。 而 且 ， 只 要 价格 低 于 你 的 心理 预期 值 ， 那 么 就 要 为 每 个 手机 购买 附件 。 
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号 的 余额 ”建立 变量 。 





计算 总 金额 后 再 加 上 税 费 ， 然 后 以 适当 的 格式 打印 出 计算 出 的 总 金额 。 
最 后 ， 检 查 银 行 账号 的 余额 ， 确 认 是 否 能 买 得 起 。 
需要 为 “税率 "、“ 手 机 价格 "、“ 附 件 价格 ”和 “预算 国 值 ”建立 一 些 常 量 ， 为 “银行 账 


你 应 该 定义 一 些 函 数 来 计算 税 费 ， 格 式 化 价格 加 上 “$” 符 号 并 保留 两 位 小 数 。 
附加 题 : 试 着 在 这 个 程序 中 集成 输入 ， 你 可 以 使 用 1.3.2 节 中 介绍 的 prompt(..)。 比 如 ， 


你 可 以 提示 用 户 输入 他 们 的 银行 账号 余额 。 享 受 吧 ， 发 挥 你 的 创造 力 ! 
好 了 ， 你 现在 可 以 开始 实践 了 。 在 你 自己 尝试 之 前 不 要 先 看 我 的 代码 ! 











因为 本 书 是 一 本 关于 JavaScript 的 书 
习 。 但 你 也 可 以 根据 个 人 意愿 而 使 月 











， 显 然 我 会 使 用 JavaScript 来 完成 这 个 练 
其 他 语言 来 实现 。 


以 下 是 我 针对 上 述 练习 而 设计 的 JavaScript 解决 方案 : 


const SPENDING_THRESHOLD = 200; 
const TAX_RATE = 0.08; 

const PHONE_PRICE = 99.99; 
const ACCESSORY_PRICE = 9.99; 


var bank_balance = 303.91; 
var amount = 0; 


function calculateTax(amount) { 
return amount * TAX_RATE; 


function formatAmount(amount) { 
return "$" + amount.toFixed( 2 ); 


} 
// 如 果 还 有 余额 ， 那 么 继续 购买 手机 


while (amount < bank_baLance) { 
// 购买 新 的 手机 ! 
amount = amount + PHONE_PRICE; 





// 是 否 可 以 负担 得 起 附件 ? 
if (amount < SPENDING_THRESHOLD) { 


amount = amount + ACCESSORY_PRICE; 


} 
} 


// 别 忘 了 交 税 


amount = amount + calculateTax( amount ); 


console. log( 
"Your purchase: 


+ formatAmount( amount ) 





太后 
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3 
// 你 的 购买 金额 :$334.76 


// 你 真 的 可 以 负担 得 起 本 次 购买 吗 ? 
if (amount > bank_balance) { 
console. log( 
"You can't afford this purchase. :(" 


DE 
} 
// 你 无 法 负担 本 次 购买 。 :( 





运行 这 个 JavaScript 程序 最 简单 的 方法 是 ， 将 其 输入 到 你 手边 浏览 器 的 开发 
者 终端 中 。 





你 是 如 何 实现 的 呢 ? 你 现在 已 经 看 到 了 我 的 代码 ， 不 妨 再 试 一 下 。 你 可 以 修改 其 中 的 一 些 
量 ， 看 看 这 个 程序 在 不 同 的 值 之 下 是 怎么 运行 的 。 


1:13 小 结 
学 习 编 程 并 不 必然 是 复杂 、 费 力 的 过 程 。 你 需要 熟悉 几 个 基本 的 概念 。 


这 些 概 念 如 同 积木 。 要 想 构 造 高 塔 ， 首 先 要 将 积木 一 层 层 操 在 一 起 。 编 程 也 是 如 此 。 以 下 
是 一 些 核心 的 编程 积木 块 。 


在 值 上 执行 动作 需要 运算 符 。 

。 执行 各 种 类 型 的 动作 需要 值 和 类 型 ， 比 如 ， 对 数字 进行 数学 运算 ， 用 字符 串 输 出 。 
。 在 程序 的 执行 过 程 中 需要 变量 来 保存 数据 (也 就 是 状态 ) 。 

。 需要 if 这 样 的 条 件 判断 来 作出 决策 。 

。 需要 循环 来 重复 任务 ， 直 到 不 满足 某 个 条 件 。 

。 需要 函数 将 代码 组 织 为 逻辑 上 可 复 用 的 块 。 


代码 注释 是 编写 可 读 代码 的 一 种 有 效 方法 ， 能 让 你 的 代码 更 易于 理解 和 维护 ， 如 果 以 后 出 
现 问 题 的 话 也 更 加 容易 进行 修复 。 


最 后 ， 不 要 忽略 练习 的 威力 ， 学 习 如 何 编 写 代码 的 最 好 方法 就 是 不 断 编写 代码 。 














很 高 兴 你 已 经 在 开始 学 习 如 何 编码 的 路 上 了 ! 继续 前 进 吧 ! 不 要 忘 了 查阅 其 他 的 编程 入 门 
资源 〈 书 籍 、 博 客 和 在 线 培 训 等 )。 本 章 和 本 部 分 就 是 一 个 很 好 的 起 点 ， 但 它们 仅仅 只 是 
一 个 概要 介绍 。 





下 一 章 将 会 介绍 本 章 出 现 的 多 个 概念 ， 但 会 从 JavaScript 的 角度 来 解释 ， 这 会 强调 多 个 主 
要 的 主题 ， 这 些 主题 是 在 本 系列 其 他 书 中 深入 详细 介绍 的 。 
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第 2 章 


深入 JavaScript 





我 们 在 前 一 章 中 介绍 了 编程 的 基本 组 件 ， 如 变量 、 循 环 、 条 件 判 断 和 函数 。 当 然 ， 其 中 展 
示 的 所 有 代码 都 是 用 JavaScript 语言 编写 的 。 而 本 章 的 主要 关注 点 是 作为 JavaScript 开发 者 
在 开始 编写 JavaScript 代码 时 所 需要 了 解 的 知识 。 














我 们 将 在 本 章 中 介绍 很 多 概念 ， 这 些 概 念 需要 阅读 其 他 的 “你 不 知道 的 JavaScript” 系 列 
图 书 才能 完全 掌握 。 你 可 以 将 本 章 看 作 本 系列 其 他 图 书 将 要 详细 介绍 的 主题 的 概论 。 
































尤其 重要 的 一 点 是 ， 如 果 你 还 只 是 JavaScript 方面 的 新 手 ， 那 么 应 该 多 花 点 时 间 查 看 这 些 
概念 并 反复 练习 本 章 中 的 示例 代码 。 坚 固 的 基础 都 是 一 点 一 点 构造 起 来 的 ， 因 此 不 要 期 望 
第 一 次 阅读 就 能 够 马上 完全 理解 这 些 概 念 。 





























深入 学 习 JavaScript 的 旅程 这 就 开始 了 。 


正如 我 在 第 1 章 中 所 说 的 ， 在 阅读 和 学 习 本 章 的 过 程 中 ， 你 绝对 应 该 亲自 
试验 一 下 所 有 的 代码 示例 。 记 住 ， 本 章 中 的 部 分 代码 假定 了 编写 本 部 分 时 
JavaScript 最 新 版 本 (JavaScript 规范 的 官方 名 称 ECMAScript 第 6 版 ， 一 般 
称 为 “ES6”) 中 引入 的 功能 。 如 果 你 恰好 在 使 用 ES6 前 的 旧版 浏览 器 ， 那 么 
这 些 代码 可 能 无 法 正常 运行 。 你 应 该 使 用 浏览 器 (如 Chrome、Firefox 或 正 
等 ) 的 更 新 版 本 。 


2.1 值 与 类 型 


我 们 在 第 1 章 中 已 经 提 到 过 ，JavaScript 的 值 有 类 型 ， 但 变量 无 类 型 。 以 下 是 可 用 的 内 
置 类 型 ; 
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。 字符 让 

。 数字 

。 null 和 undefined 

。 对 象 

。 符号 (ES6 中 新 增 的 ) 


JavaScript 提供 了 一 个 typeof 运算 符 ， 该 运算 符 可 以 用 来 查看 值 的 类 型 : 





var ai 
typeof a; // "undefined" 

a = "hello world"; 

typeof a; // "string" 

a=42; 

typeof a; // "number" 

a = true; 

typeof a; // "boolean" 

a= null; 

typeof a; // "object"- -诡异 ， 这 是 bug 
a = undefined; 

typeof a; // "undefined" 

a={b: TT e"}s 

typeof a; // "object" 


typeof 运算 符 的 返回 值 永远 是 这 6 个 (对 ES6 来 说 是 7 个 ) 字符 串 值 之 一 。 也 就 是 说 ， 
typeof "abc" 返回 "string"， 而 不 是 string。 








请 注意 这 段 代 码 中 的 变量 是 如 何 持 有 多 个 不 同类 型 的 值 的 ， 和 表面 看 起 来 不 同 ，typeof 并 
不 是 在 询问 “a 的 类 型 "， 而 是 “a 中 当前 值 的 类 型 *。 在 JavaScript 中 ， 只 有 值 有 类 型 ， 变 


量 只 是 这 些 值 的 容器 。 











typeof null 是 一 个 有 趣 的 示例 ， 你 期 望 它 返回 的 会 是 "nutl", 但 它 返回 的 却 是 "object"， 
这 大 概 会 让 你 觉得 很 意外 。 


这 是 JavaScript 中 存在 已 久 的 一 个 bug， 也 似乎 是 一 个 永远 不 会 被 修复 的 
bug。Web 上 的 太 多 代码 都 依赖 于 这 个 bug， 因 此 ， 修 复 它 会 导致 大 量 的 
新 bug ! 





另外 ， 注 意 a = undefined。 我 们 显 式 地 将 a 的 值 设置 为 undefined, 但 从 行为 上 来 说 ， 这 
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与 这 段 代 码 最 开始 的 var a 这 样 还 未 赋值 的 变量 是 一 样 的 。 变 量 能 够 以 几 种 不 同 的 方式 进 
入 这 样 “未 定义 ” 值 的 状态 ， 其 中 包括 没有 返回 值 的 函数 和 使 用 void 运算 符 。 


2.1.1 对 象 
对 象 类 型 是 指 一 个 组 合 值 ， 你 可 以 为 其 设置 属性 〈 命 名 的 位 置 )， 每 个 属性 可 以 持 有 属于 
自己 的 任意 类 型 的 值 。 这 也 许 是 JavaScript 中 所 有 的 值 类 型 中 最 有 用 的 一 个 : 


















































var obj = { 
a: "hello world", 
b: 42， 
c: true 
}; 
obj.a; // "hello world" 
obj.b; // 42 
obj.c; // true 


obj["a"];  // "hetllo world" 
obj["b"]; // 42 
obj["c"]; // true 





可 以 将 这 个 obj 值 想 象 成 以 下 这 个 可 视 化 的 状态 ， 这 样 更 便于 理解 : 




















可 以 通过 点 号 (如 obj.a 所 示 ) 或 者 中 括号 (如 obj["a"] 所 示 ) 来 访问 属性 。 点 号 更 简短 
易 读 ， 因 而 尽量 使 用 这 种 方式 。 





如 果 属 性 名 中 有 特殊 字符 的 话 ， 那 么 中 括号 表示 法 就 会 很 有 用 ， 如 obj["hetlo wortd!"], 在 
通过 中 括号 表示 法 访问 时 ， 我 们 通常 将 这 样 的 属性 称 为 键 值 。[ ] 表示 法 接受 变量 (后面 将 
会 解释 ) 或 者 字符 申 字面 值 (需要 使 用 ".… 或 '.… 包 囊 )。 


当然 ， 如 有 果 需 要 访问 的 某 个 属性 / 键 值 的 名 称 保 存在 另 一 个 变量 中 时 ， 括 号 表示 法 也 很 有 
用 ， 如 下 所 示 : 






























































var obj = { 
a: "hello world", 
b: 42 

}; 


Vac” bE "a 


obj[b]; // "hello world" 
obj["b"]; // 42 
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有 关 对 象 的 更 多 信息 ， 参 见 本 系列 《你 不 知道 的 JavaScript (上 
卷 )》 第 二 部 分 ， 特 别 是 第 3 章 








在 JavaScript 程序 中 ， 你 还 需要 经 常 和 其 他 两 个 值 类 型 打交道 : 数组 和 函数 。 但 你 更 应 该 
将 它们 看 作 是 对 象 类 型 的 特殊 子 类 型 ， 而 不 是 内 置 类 型 。 





1. 数组 
数组 是 一 个 持 有 (任意 类 型 ) 值 的 对 象 ， 这 些 值 不 是 通过 命名 属性 / 键 值 索引 ， 而 是 通过 
数字 索引 位 置 。 如 下 所 示 : 


var arFr < [ 
"hello world", 


42， 
true 
]; 
arr[9]; // "hello world" 
arr[1]; // 42 
arr[2]; // true 
arr. length; // 3 
typeof arr; // "object" 


像 JavaScript 这 样 从 零 开始 计数 的 语言 ， 会 使 用 9 作为 数组 中 第 一 个 元 素 的 
索引 。 


























可 以 将 这 个 arr 值 想象 成 以 下 这 种 可 视 化 的 状态 ， 这 样 更 便于 理解 : 








arr 


* “hello world” 1 42 te | 


因为 数组 是 特殊 的 对 象 (正如 typeof 所 暗示 的 那样 ) ， 所 以 它们 也 可 以 有 属性 ， 其 中 包括 
自动 更 新 的 Length 属性 。 


从 理论 上 来 说 ， 你 可 以 将 数组 当 作 普 通 的 对 象 来 使 用 ， 为 其 添加 自己 的 命名 属性 ， 或 者 你 
也 可 以 只 为 一 个 对 象 提供 数字 属性 (6、1 等 )， 就 像 数 组 一 样 使 用 它 。 但 一 般 来 说 ， 这 样 
使 用 这 些 类 型 是 不 合理 的 。 


最 好 的 同时 也 是 最 自然 的 方法 就 是 使 用 数字 位 置 索引 数组 ， 通 过 命名 属性 使 用 对 象 。 
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2. 函数 
在 JavaScript 程序 中 ， 男 一 个 常用 的 对 象 子 类 型 是 函数 : 
function foo() { 


return 42; 


} 


foo.bar = "hello world"; 


typeof foo; // "function" 
typeof foo(); // "number" 
typeof foo.bar; // "string" 


函数 也 同样 是 对 象 的 一 个 子 类 型 ， 因 为 typeof 返回 "function"， 这 意味 着 function 是 一 
个 主 类 型 ， 因 此 ，function 可 以 拥有 属性 ， 但 通常 只 在 很 少 的 情况 下 才 会 使 用 函数 的 对 象 
属性 (如 foo.bar)。 











有 关 JavaScript 值 和 类 型 的 更 多 信息 ， 参 见 本 系列 《你 不 知道 的 JavaScript 
(中 卷 )》 第 一 部 分 的 前 两 章 。 


2.1.2 ”内 置 类 型 方法 
我 们 刚刚 讨论 过 的 内 置 类 型 和 子 类 型 拥有 作为 属性 和 方法 暴露 出 来 的 行为 ， 这 是 非常 强大 
有 力 的 功能 


举例 来 说 : 





var a = "hello world"; 
var b = 3.14159; 


a. length; /{ 11 
a.toUpperCase(); // "HELLO WORLD" 
b. toFixed(4); // "3.1416" 


能 够 调用 a.toUpperCase() 的 原理 要 比值 上 存在 的 方法 这 种 解释 复杂 得 多 。 


简单 地 说 ， 存 在 一 个 String (Ss 大 写 ) 对 象 封装 形式 ， 通 常 称 为 “原生 的 ”， 与 基本 string 
类 型 相对 应 ;这 个 对 象 封装 在 其 原型 中 定义 了 toUpperCase() 方 法。 


像 前 面 的 代码 片段 中 那样 将 "hello world" 0 0 
和 方法 时 (比如 toUpperCase())，JavaScript 会 (上 暗自 ) 自动 地 将 这 个 值 “ 封 箱 ” 为 其 对 应 
的 对 象 封装 。 


字符 串 值 可 以 封装 为 String 对 象 ， 数 字 可 以 封装 为 Number 对象， 布尔 型 值 可 以 封装 为 
Boolean 对 象 。 在 多 数 情况 下 ， 你 不 需要 思考 直接 使 用 这 样 的 值 的 对 象 封 装 形式 ， 所 有 情 
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况 下 都 使 用 原生 值 形式 ， 让 JavaScript 来 负责 其 余 的 事情 吧 。 


有 关 JavaScript 原生 类 型 和 “ 封 箱 ” 的 更 多 信息 ， 参 见 本 系列 《你 不 知道 的 
JavaScript (中 卷 )》 第 一 部 分 的 第 3 章 。 要 想 更 好 地 理解 一 个 对 象 的 原型 ， 
参见 《你 不 知道 的 JavaScript (上 卷 )》 第 二 部 分 的 第 5 章 。 





2.1.3 值 的 比较 
JavaScript 程序 中 有 两 种 主要 的 值 比较 : 相等 与 不 等 。 不 管 比较 的 类 型 是 什么 ， 任 何 比较 
的 结果 都 是 严格 的 布尔 值 (true 或 者 false)。 


1. 类 型 转换 

我 们 在 第 1 章 中 简单 地 讨论 了 类 型 转换 ， 现 在 再 深入 讨论 一 下 。 

JavaScript 中 有 两 种 类 型 转换 : 显 式 的 类 型 转换 与 隐 式 的 类 型 转换 。 显 式 的 类 型 转换 就 是 
你 可 以 在 代码 中 看 到 的 类 型 由 一 种 转换 到 另 一 种 ， 而 隐 式 的 类 型 转换 多 是 某 些 其 他 运算 可 
能 存在 的 隐 式 副作用 而 引发 的 类 型 转换 。 

你 可 能 昕 过 “类 型 转换 是 政 恶 的 ”这 种 说 法 ， 这 显然 是 因为 有 些 情况 下 的 类 型 转换 确实 会 
产生 一 些 出 人 意料 的 结果 。 最 能 够 激怒 程序 员 的 事情 就 是 语言 发 生出 平 意料 的 变化 。 




















类 型 转换 并 不 是 邪恶 的 ， 也 并 不 一 定 是 出 人 意料 的 。 实 际 上 ， 使 用 类 型 转换 的 多 数 情况 都 
是 非常 容易 理解 的 ， 其 至 可 以 提高 代码 的 可 读 性 。 我 们 不 再 深入 这 个 有 和 争议 的 话题 ， 本 系 
列 《 你 不 知道 的 JavaScript (中 卷 )》 第 一 部 分 的 第 4 章 覆 盖 了 这 个 主题 的 方方面面 。 




















以 下 是 显 式 类 型 转换 的 一 个 示例 : 
var a = "42"; 
var b = Number( a ); 


a; 1/ "42" 
b; // 42-- 数 字 ! 


以 下 是 隐 式 类 型 转换 的 一 个 示例 : 
var a = "42"; 


var b = a * 1; // 这 里 "42" 隐 式 地 转换 为 了 42 


a; // "42" 
b; // 42- -数字 ! 
2. 真 与 假 





我 们 在 第 1 章 中 简单 地 提 到 了 值 的 “ 真 ” 与 “ 假 ”的 特性 : 当 非 布尔 型 的 值 被 强制 转换 为 
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布尔 型 时 ， 结 果 是 true 还 是 false 呢 ? 
JavaScript 中 “ 假 ” 值 的 详细 列表 如 下 : 


“字符 是) 
。 09、-9、NaN( 无 效 数字 ) 
。 nuLL、undefined 


。 false 


任何 不 在 “ 假 ” 值 列表 中 的 值 都 是 “ 真 ” 值 。 以 下 是 一 些 示 例 : 


。 "hello" 

。 42 

。 true 

。[]、[ 1,"2", 3 ] (数组 ) 

。 {}、{ a: 42 } (对 和 象 ) 

。 function foo() { .. } (函数 ) 


你 需要 记 住 非常 重要 的 一 点 ， 只 有 在 非 布 尔 型 值 强制 转换 为 布尔 型 值 时 才 会 遵从 这 个 
“ 真 ”/“ 假 ”转换 规则 。 看 起 来 是 将 一 个 值 转换 成 布尔 型 ， 而 实际 上 并 没有 ， 这 样 的 情况 
还 是 很 容易 令 人 迷惑 的 。 








3. 相等 

相等 运算 符 有 四 种 : ==、===、!= 和 !==。! 形式 显然 是 相应 的 “不 等 ”版 本 ， 不 要 混 请 了 
不 等 关系 和 不 相等 。 
== 和 === 的 区 别 在 于 ，== 检查 值 相等 ， 而 === 检查 值 和 类 型 相等 。 但 这 么 说 并 不 精确 。 正 


确 的 说 法 是 ，== 检查 的 是 允许 类 型 转换 情况 下 的 值 的 相等 性 ， 而 === 检查 不 允许 类 型 转换 
情况 下 的 值 的 相等 性 ， 因 此 ，=== 经 常 被 称 为 “严格 相等 ”。 


思考 以 下 的 情况 ，== 的 粗略 相等 比较 允许 隐 式 的 类 型 转换 ， 而 严格 相等 比较 === 则 不 
允许 : 


var a = "42"; 

var b = 42; 

a ==7 1b: // true 
a === b; // false 


在 比较 a == b 的 过 程 中 ，JavaScript 注意 到 这 两 个 值 的 类 型 不 匹配 ， 于 是 它 会 按照 一 系列 
的 顺序 步骤 将 其 中 一 个 或 两 个 值 的 类 型 转换 到 其 他 类 型 ， 直 到 类 型 匹配 ， 然 后 进行 简单 的 
值 相 等 检查 。 
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思考 一 下 这 个 过 程 ， 有 两 种 类 型 转换 情况 可 以 导致 a == b 结果 为 真 。 最 终 比 较 的 要 么 是 
42 == 42， 要 么 是 "42”== "42"， 那 么 到 底 是 哪 一 个 呢 ? 





答案 是 ，"42" 被 转化 为 了 42， 使 得 最 终 的 比较 为 42 == 42。 在 这 个 简单 的 示例 中 ， 过 程 
似乎 是 无 关 紧要 的 ， 因 为 最 终结 果 都 是 一 样 的 。 而 在 一 些 更 为 复杂 的 示例 中 ， 不 只 是 最 终 
的 比较 结果 很 重要 ， 转 换 过 程 也 会 产生 影响 。 


a === b 为 假 ， 因 为 类 型 转换 不 被 允许 ， 所 以 简单 的 值 比 较 的 结果 显然 为 假 。 很 多 开发 者 
认为 === 更 可 预测 ， 所 以 他 们 支持 一 直 使 用 === 而 避免 使 用 ==。 我 认为 这 种 观点 是 很 短视 
的 。 在 我 看 来 ，== 是 一 个 强大 的 工具 ， 如 果 花 时 间 来 学 习 其 工作 原理 的 话 ， 那 么 对 程序 是 
很 有 益 的 


我 们 不 打算 面面俱到 地 覆盖 == 比较 中 类 型 转换 的 所 有 工作 细节 。 多 数 情况 都 是 比较 容易 
理解 的 ， 但 也 有 一 些 重要 的 特例 需要 小 心 对待 。 你 可 以 查看 ES5 规范 2 //wwwW.ecma- 
international.org/ecma-262/5.1/) 的 11.9.3 节 来 了 解 精确 的 规则 ， 与 围绕 着 == 的 负面 传闻 相 
比 ， 你 可 能 会 吃惊 于 这 套 机 制 看 起 来 是 多 么 直观 。 


下 面 我 将 列 出 几 条 简单 的 规则 ， 将 所 有 这 些 大 量 的 细节 归结 为 简单 的 条 目 ， 以 帮助 你 了 解 
在 不 同情 况 下 应 该 使 用 == 还 是 ===。 


。 如 果 要 比较 的 两 个 值 的 任意 一 个 〈 即 一 边 ) 可 能 是 true 或 者 false 值 ， 那 么 要 避免 使 
=， 而 使 用 ===。 
。 各 果 要 比较 的 两 个 值 中 的 任意 一 个 可 能 是 特定 值 (6、" 或 者 [ 
免 使 用 ==， 而 使 用 ===。 
。 在 所 有 其 他 情况 下 ， 使 用 == 都 是 安全 的 。 不 仅仅 只 是 安全 而 已 ， 这 在 很 多 情况 下 也 会 
简化 代码 ， 提 高 代码 的 可 读 性 。 


ee Sn 量 的 可 能 值 有 哪 
。 如 果 你 能 够 确定 这 些 值 ， 并 且 == 是 安全 的 ， 那 么 就 可 以 使 用 它 ! 如 果 不 能 确定 其 值 ， 
那么 就 使 用 ---。 就 是 这 么 简单 


不 等 != 与 = 对应，!== 与 === 对 应 。 前 面 讨论 过 的 所 有 规则 和 观察 对 这 些 不 等 比较 也 都 
是 适用 的 。 


如 果 是 比较 两 个 非 原 生 值 的 话 ， en ge ead se 
ee 因为 这 些 值 通常 是 通过 引用 访问 的 ， 所 以 == 和 === 比较 只 是 简单 地 检 
这 些 引 用 是 否 匹配 ， 而 完全 不 关心 其 引用 的 值 是 什么 。 


举例 来 说 ， 通 过 简单 地 在 元 素 之 间 插 入 喜 号 (,)， 数 组 在 默认 情况 下 会 转换 为 字符 串 。 你 
可 能 会 认为 内 容 相 同 的 两 个 数组 也 会 == 相等 ， 但 并 非 如 此 : 












































空 数组 )， 那 么 避 
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var a= [1,2,3] 
var b = [1,2,3] 
var C = "1,2,3 
a == Cc; // true 
bs 人 // true 
a == b; // false 


有 关 == 相等 比较 规则 的 更 多 信息 ， 参 见 ES5 规范 (11.9.3 节 ) 以 及 本 系列 
《你 不 知道 的 JavaScript (中 卷 )》 第 一 部 分 的 第 4 章 ， 有 关 值 与 引用 的 更 多 
信息 ， 参见 《你 不 知道 的 JavaScript (中 卷 )》 第 一 部 分 的 第 2 章 。 


4. 不 等 关系 
运算 符 <,>、<= 和 >= 用 于 表示 不 等 关系 ， 在 规范 中 被 称 为 “关系 比较 ”。 通 常 来 说 ， 它 们 
用 于 比较 有 序 值 ， 比 如 数字 。3 < 4 这 样 的 比较 是 很 容易 理解 的 。 


也 可 以 比较 JavaScript 中 的 字符 串 值 的 不 等 关系 ， 这 是 按照 常见 的 字母 表 规 则 来 比较 的 


("bar" < "foo" )。 


类 型 转换 呢 ? 与 = 比较 规则 类 似 (尽管 是 不 完全 相同 ! ) 的 规则 可 以 应 用 于 不 等 关系 运 
算 符 。 注 意 ， 并 没有 与 “严格 相等 ”=== 类 似 的 、 不 允许 类 型 转换 的 “严格 不 等 关系 ” 运 
算 符 。 


考虑 : 





var a = 41; 
var b = "42"; 


var C = "43"; 
.< bs // true 
b < c; // true 

















上 述 代码 发 生 了 什么 ? ES5 规范 中 的 11.8.5 节 中 提 到 ， 如 果 < 比较 的 两 个 值 都 是 字符 串 ， 
就 像 在 b < c 中 那样 ， 那 么 比较 按照 字典 顺序 〈 即 字典 中 的 字母 表 顺 序 ) 进行 。 如 果 其 中 
一 边 或 两 边 都 不 是 字符 串 ， 就 像 在 a < b 中 那样 ， 那 么 这 两 个 值 的 类 型 都 转换 为 数字 ， 然 
后 进行 普通 的 数字 比较 。 


针对 类 型 可 能 不 同 的 值 之 间 的 比较 ， 请 记 住 , 没有 “严格 不 等 ”形式 可 用 。 
的 一 点 是 ， 当 其 中 一 个 值 无 法 转换 为 有 效 数 字 时 的 情形 ， 如 下 所 示 : 





ri 


尔 最 需要 了 解 





var a = 42; 


var b = "foo"; 
a<b; // false 
a>b // false 


a == b; // false 
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为 什么 这 三 个 比较 结果 都 为 假 呢 ? 这 是 因为 < 和 > 比较 中 的 值 b 都 被 类 型 转换 为 了 “无 效 
数字 值 ”NaN， 规 范 设 定 NaN 既 不 大 于 也 不 小 于 任何 其 他 值 。 











== 比较 的 结果 为 假 的 原因 则 不 同 。 不 论 解释 为 42 == NaN 还 是 "42”== "foo"， 都 会 使 得 
a == b 结果 为 假 一 一 我 们 已 经 在 前 文中 介绍 过 ， 这 种 情况 属于 前 者 。 























有 关 不 等 比较 规则 的 更 多 信息 ， 参 见 ES5 标准 的 11.8.5 节 以 及 本 系列 《你 不 
知道 的 JavaScript (中 卷 )》 第 一 部 分 的 第 4 章 。 





2.2 变量 

在 JavaScript 中 ， 变 量 的 名 称 (包括 函数 名 称 ) 必须 是 有 效 的 标识 符 。 考 虑 到 Unicode 这 
样 的 非 传统 字符 的 情况 ， 标 识 符 中 有 效 字 符 的 严格 完整 规则 有 点 复杂 。 如 果 只 是 芳 虑 常用 
的 ASCII 字母 数字 的 话 ， 那 么 规则 是 非常 简单 的 。 








标识 符 必须 由 a-z、A-Z、$ 或 “开始 。 它 可 以 包含 前 面 所 有 这 些 字符 以 及 数字 9-9。 











一 般 来 说 ， 变 量 标 识 符 的 这 个 规则 对 属性 命名 也 同样 适用 。 但 是 ， 有 些 单词 不 能 用 作 变 量 
名 ， 但 可 以 作为 属性 名 。 这 些 单词 被 称 为 “保留 词 ”， 其 中 包括 JavaScript 关键 字 (for、 
in、if 等) 以 及 nuLL、true 和 false。 

















有 关 保留 字 的 更 多 信息 ， 参 见 本 系列 《你 不 知道 的 JavaScript (中 卷 )》 第 一 
部 分 的 附录 A。 





函数 作用 域 
如 果 使 用 关键 字 var 声明 一 个 变量 ， 那 么 这 个 变量 就 属于 当前 的 函数 作用 域 ， 如 果 声 明 是 
发 生 在 任何 函数 外 的 顶层 声明 ， 那 么 这 个 变量 则 属于 全 局 作用 域 。 









































1. 提升 
无 论 var 出 现在 一 个 作用 域 中 的 哪个 位 置 ， 这 个 声明 都 属于 整个 作用 域 ， 在 其 中 到 处 都 是 
可 以 访问 的 。 





这 一 行为 被 比喻 地 称 为 提升 hoisting)，var 声明 概念 上 “移动 ”到 了 其 所 在 作用 域 的 最 前 
面 。 从 技术 上 来 说 ， 可 以 通过 如 何 编译 代码 更 精确 地 解释 这 个 过 程 ， 我 们 暂时 先 不 殉 述 这 








深入 JavaScript | 35 
图 灵 社 区 会 员 avilang(1985945885@qq.com) 专 享 尊重 版 权 


foo(); // 因为 foo() 而 运行 
// 声明 是 “被 提升 的 ” 


function foo() { 
a = 3; 


console.log( a ); // 3 


var a; // 声明 是 “被 提升 的 ” 
// 到 foo( ) 的 顶端 
} 
console.log( a ); // 2 











在 变量 声明 出 现 之 前 ， 依 靠 变量 提升 在 其 作用 域 使 用 这 个 变量 并 不 常见 ， 也 
并 不 是 一 个 好 的 想法 ， 这 样 的 代码 可 能 会 令 人 非常 迷惑 。 相 比 之 下 ， 使 用 提 
升 后 的 国 数 声 明 则 要 常见 得 多 ， 就 像 我 们 在 foo() 的 正式 声明 出 现 前 就 调用 
了 和 多。 











2. 肉 套 作用 域 


声明 后 的 变量 在 这 个 作用 域内 是 随处 可 以 访问 的 ， 包 括 所 有 低层 /内 层 的 作用 域 。 举 例 
来 说 : 








function foo() { 
var a = 1; 


function bar() { 
Var b = 2; 


function baz() { 
var C= 3; 


console.log( a, bc ); //123 


} 
baz(); 
console.log( a, b ); //{12 
} 
bar(); 
console.log( a ); J 
} 
foo(); 





注意 ， 在 上 述 示例 中 ,< 在 bar() 的 内 部 是 不 可 访问 的 ， 因 为 它 只 声明 在 内 层 baz() 作用 
域 ，b 在 foo() 中 是 不 可 访问 的 ， 也 是 同样 的 原因 。 




















如 果 试 图 在 一 个 作用 域 中 访问 一 个 不 可 访问 的 变量 ， 那 么 就 会 抛 出 ReferenceError。 如 果 
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试图 设 定 尚 未 声明 的 变量 ， 那 么 就 会 导致 在 顶层 全 局 作用 域 创 建 这 个 变量 (不 好 ! ) 或 者 
出 现 错误 ， 这 要 根据 是 否 处 于 “严格 模式 ”而 定 (参见 2.4 节 )。 我 们 来 看 一 下 : 








function foo() { 
a = 1; // a 没有 正式 声明 
} 


foo(); 
9 





// 1- 蛟 川 ， 自动 全 局 变量 :( 
这 是 一 个 很 差 的 实践 。 不 要 这 么 做 ! 一 定 要 正式 声明 你 的 变量 。 








除了 在 函数 层级 声明 变量 ，ES6 还 支持 通过 let 关键 字 声 明 属于 单独 块 ({ .. } 对 ) 的 变 
量 。 除 了 细节 上 有 一 些微 小 差别 ， 这 里 的 作用 域 规则 和 我 们 在 函数 中 看 到 的 基本 上 是 相同 
的 : 
function foo() { 
var a= 1; 
if (a >= 1) { 
let b = 2; 


while (b < 5) { 
let c=b*2; 
b++; 


console.log( a + Cc ); 
} 
} 
} 


foo(); 
人 /5 了 7 号 





因为 使 用 了 let 而 不 是 var， 所 以 b 只 属于 if 语句 ， 不 属于 整个 foo() 函数 的 作用 域 。 与 
此 类 似 ，c 只 属于 while 循环 。 块 作用 域 非常 有 助 于 更 细 化 地 管理 变量 作用 域 ， 从 而 更 容 
易 随 着 时 间 的 发 展 而 维护 代码 。 











有 关 作 用 域 的 更 多 信息 ， 参 见 本 系列 中 的 《你 不 知道 的 JavaScript (上 卷 )》 
第 一 部 分 。 有 关 let 块 作用 域 的 更 多 信息 ， 参 见 本 书 第 二 部 分 。 











2.3 条件 判 断 


除了 第 1 章 中 简单 介绍 过 的 if 语句 ，JavaScript 还 提供 了 几 种 其 他 条 件 判断 机 制 ， 我 们 也 
应 该 了 解 一 下 。 
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你 有 时 可 能 会 编写 出 一 系列 的 if. .etse if 语句 ， 如 下 所 示 : 


if (a == 2) { 
// 做 某 件 事情 


日 





一 


else if (a == 10) { 
// 做 另 一 件 事情 


else if (a == 42) { 
// 做 另 一 件 事情 


else { 


// 反馈 到 这 儿 


这 样 的 结构 可 以 运行 ,但 是 有 点 繁复 ， 因 为 你 需要 为 每 种 情况 都 指定 一 个 测试 。switch 语 
句 是 另 一 种 选择 : 


switch (a) { 

Case 2: 
// 做 某 件 事情 
break; 

case 10: 
// 做 另 一 件 事情 
break:; 

case 42: 
// 做 另 一 件 事情 
break:; 

default: 
// 反馈 到 这 儿 





oy 





如 果 只 想 要 运行 某 个 case 下 的 语句 ， 那 么 break 是 很 重要 的 。 如 果菜 个 case 省 略 了 
break， 而 这 个 case 匹配 或 运行 的 话 ， 那 么 会 一 直 执 行 到 下 一 个 case 的 语句 ， 不 管 那个 
case 是 否 匹 配 。 这 种 所 谓 的 “通过 (fall through) ”有 时 是 很 有 用 的 。 


switch (a) { 

Case 2: 

case 10: 
// 某 个 很 棒 的 东西 
break:; 

case 42: 
// 其 他 东西 
break; 

default: 
// 反馈 





} 
在 上 述 示例 中 ， 如 果 2 或 者 19 匹配 的 话 ， 那 么 就 会 执行 “ 某 个 很 棒 的 东西 ”代码 语句 。 


在 JavaScript 中 ， 条 件 判 断 的 另 一 种 形式 是 “条 件 运算 符 "， 通 常 被 称 为 “三 进 制 运算 符 ”。 
它 更 像 是 单个 if. .else 语句 的 紧凑 版 ， 如 下 所 示 : 
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var a = 42; 
varb=(a> 41) ? "hello" : "world"; 
// 与 以 下 类 似 : 


// if (a > 41) { 
// b = "hello"; 
// 

// else { 

// b = "world"; 
//} 


如 果 条 件 表达 式 (这 里 是 a > 41) 求 值 为 真 ， 那么 就 会 返回 第 一 个 子 句 ("hello") ; 否 
则 ， 结 果 就 是 第 二 个 子 句 ("wortd")， 不 论 结果 是 什么 ， 都 会 赋 给 b。 





条 件 运算 符 并 不 一 定 要 用 在 赋值 上 ， 但 这 肯定 是 最 常见 的 用 法 。 


有 关 switch 和 ? : 的 测试 条 件 及 其 他 模式 的 更 多 信息 ， 参 见 本 系列 中 的 《你 
不 知道 的 JavaScript (中 卷 )》 第 一 部 分 。 





2.4 ”严格 模式 


ES5 为 这 个 语言 新 增 了 “严格 模式 "， 严 格 限制 了 某 些 行为 的 规则 。 一 般 来 说 ， 这 些 限制 
可 以 将 代码 保持 在 一 个 更 安全 、 更 适当 的 规范 集合 之 内 。 另 外 ， 遵 循 严格 模式 也 更 容易 让 
引擎 优化 你 的 代码 。 严 格 模式 是 代码 的 一 次 重大 突破 ， 你 应 该 在 自己 的 程序 中 一 直 使 用 。 








根据 严格 模式 编译 指示 放置 的 位 置 ， 你 可 以 选择 使 用 单独 的 函数 或 者 整个 文件 来 遵循 严格 
模式 : 


function foo() { 
"use strict"; 


// 这 个 代码 是 严格 模式 
function bar() { 
// 这 个 代码 是 严格 模式 

} 

} 

// 这 个 代码 不 是 严格 模式 

对 比 : 
"Use strict"; 


function foo() { 
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// 这 个 代码 是 严格 模式 
function bar() { 
// 这 个 代码 是 严格 模式 
ee 
// 这 个 代码 是 严格 模式 
使 用 严格 模式 的 一 个 关键 区 别 (改进 ! ) 是 ， 不 允许 省 略 var 的 隐 式 自动 全 局 变量 声明 : 


function foo() { 
"use strict"; ”// 开启 严格 模式 


dS // 省 略 var， 出 现 ReferenceError 错 误 





} 


foo(); 

















如 果 你 在 代码 中 打开 严格 模式 ， 但 代码 报错 或 者 开始 出 现 bug， 这 可 能 会 诱 使 你 避 开 严格 
模式 。 但 这 个 本 能 是 一 个 坏 习 惯 。 如 果 严 格 模 式 导致 程序 出 现 问 题 ， 几 乎 可 以 确定 这 标志 
着 你 的 程序 中 有 些 东 西 应 该 进行 修复 。 

严格 模式 不 只 会 让 你 的 代码 更 加 安全 或 者 更 易于 优化 ， 更 代表 了 这 门 语言 未 来 的 发 展 方 
向 。 现 在 就 要 开始 习惯 严格 模式 ， 而 不 是 一 直 往 后 推 ， 这 对 你 来 说 更 简单 一 些 ， 因 为 转变 
更 晚 只 会 更 难 ! 




















有 关 严 格 模式 的 更 多 信息 ， 参 见 本 系列 《你 不 知道 的 JavaScript (中 卷 )》 第 
一 部 分 的 第 5 章 。 


2.5 ”作为 值 的 函数 
到 目前 为 止 ， 我 们 已 经 介绍 了 JavaScript 中 作为 主要 作用 域 机 制 的 函数 。 回 忆 一 下 典型 的 
函数 声明 语法 是 怎样 的 : 








function foo() { 
fa 
} 
虽然 从 这 个 语法 上 看 可 能 不 是 很 明显 ,但 foo 基本 上 就 是 一 个 外 层 作 用 域 中 的 一 个 变量 ， 
这 个 作用 域 赋 予 被 声明 函数 一 个 引用 。 也 就 是 说 ， 这 个 函数 本 身 是 一 个 值 ， 就 像 42 或 者 
[1,2,3] 一 样 。 

















这 个 概念 乍 昕 起 来 可 能 很 奇怪 ， 你 需要 花 点 时 间 来 理解 它 。 不 仅 你 可 以 向 函数 传 入 值 ( 参 
数 ) ， 函 数 本 身 也 可 以 作为 值 赋 给 变量 或 者 向 其 他 国 数 传 和信， 又 或 者 从 其 他 函数 传 出 。 
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因此 ， 应 该 将 函数 值 视 为 一 个 表达 式 ， 与 其 他 的 值 或 者 表达 式 类 似 。 
考虑 : 


var foo = function() { 
// 

}; 

var x = function bar(){ 

下 
第 一 个 赋 给 变量 foo 的 函数 表达 式 被 称 为 是 匿名 的 ， 因 为 这 个 函数 表达 式 没 有 名 称 。 
第 二 个 函数 表达 式 是 已 命名 的 (bar)， 即 使 它 的 引用 赋值 给 了 变量 x。 虽 然 匿名 函数 表达 
式 的 使 用 仍然 极为 广泛 ， 但 通常 更 需要 已 命名 函数 表达 式 。 


要 想 获取 更 多 信息 ， 参 见 本 系列 中 的 《你 不 知道 的 JavaScript (上 卷 )》 第 一 部 分 。 








2.5.1 立即 调用 函数 表达 式 
在 前 面 的 代码 片段 中 ， 两 个 函数 表达 式 都 没有 运行 一 一 如 果 加 上 foo() 或 者 x()， 那 么 就 
可 以 执行 了 。 


还 有 另 一 种 方法 可 以 执行 函数 表达 式 ， 这 种 方法 通常 被 称 为 立即 调用 函数 表达 式 


(immediately invoked function expression, IIFE) : 
































(function IIFE(){ 
console.log( "Hello!" ); 

])(); 

// "Hello!" 











(function IIFE(){ .. }) 函数 表达 式 外 面 的 ( .. ) 就 是 JavaScript 语法 能 够 防止 其 成 为 普 
通 函 数 声 明 的 部 分 。 


表达 式 最 后 的 () ( 即 })(); 这 一 行 ) 实际 上 就 表示 立即 执行 前 面 给 出 的 函数 表达 式 。 


这 看 起 来 可 能 有 点 奇怪 ， 但 实际 上 并 不 像 初 看 上 去 那么 诡异 。 思 芳 foo 和 这 里 的 IIFE 的 类 
似 之 处 : 

















function foo() { ..} 


// foo 函 数 引 用 表达 式 ， 然 后 () 执 行 它 
foo(); 


// IIFE 消 数 表 达 式 ， 然 后 () 执 行 它 
(function IIFE(){ .. })0O); 
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正如 你 看 到 的 ， 在 运行 () 前 列 出 (function IIFE(){ .. }) 本 质 上 和 执行 () 之 前 的 foo 是 
一 样 的 ， 两 种 情况 都 是 使 用 () 执行 了 在 它 之 前 的 函数 引用 。 














因为 IEFE 就 是 一 个 函数 ， 而 且 函 数 会 创建 新 的 变量 作用 域 ， 所 以 使 用 IIFE 的 这 种 风格 也 
常用 于 声明 不 会 影响 IFE 外 代码 的 变量 : 
var a = 42; 
(function IIFE(){ 
var a = 10; 
console.log( a ); // 10 
])(); 


console.log( a ); // 42 


IIFE 也 可 以 有 返回 值 : 





var x = (function IIFE(){ 
return 42; 


})0); 


区 入 “了 大 .42 


以 上 执行 的 IIFE 命名 函数 返回 了 值 42， 并 被 赋 给 了 x。 








2.5.2 闭 包 

闭 包 是 JavaScript 中 一 个 非常 重要 ， 且 经 党 被 误解 的 概念 。 这 里 不 作 深 入 介绍 ， 可 以 参见 
本 系列 中 的 《你 不 知道 的 JavaScript (上 卷 )》 第 一 部 分 。 但 我 将 会 解释 相关 的 几 个 要 点 ， 
以 帮助 你 理解 一 般 概念 。 这 将 会 是 你 JavaScript 技巧 集中 最 重要 的 技术 之 一 。 

你 可 以 将 闭 包 看 作 “ 记 忆 ” 并 在 函数 运行 完毕 后 继续 访问 这 个 函数 作用 域 (其 变量 ) 的 一 
种 方法 。 


考虑 : 











function makeAdder(x) { 
// 参数 x 是 一 个 内 层 变 量 


// 内 层 函 数 add() 使 用 x， 所 以 它 外 围 有 一 个 “ 闭 包 ” 
function add(y) { 
return y + X; 


此 

















return add; 


} 








每 次 调用 外 层 makeAdder(..) 返 回 的 、 指 向 内 层 add(..) 函数 的 引用 能 够 记忆 传 入 
makeAdder(..) 的 x 值 。 现 在 ， 我 们 来 使 用 makeAdder(..): 
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// pLusone 获 得 指向 内 层 add(..) 的 一 个 引用 
// 带 有 闭 包 的 函数 在 外 层 makeAdder(..) 的 x 参数 上 
var plusOne = makeAdder( 1 ); 











// pLusTen 区 得 指向 内 层 add(..) 的 一 个 引用 
// 带 有 闭 包 的 函数 在 外 层 makeAdder(..) 的 x 参数 上 
var plusTen = makeAdder( 10 ); 








T 














plusOne( 3 ); //4<--1+3 
plusOne( 41 ); // 42 <-- 1 + 41 
plusTen( 13 ); // 23 <-- 10 + 13 


我 们 来 详细 说 明 一 下 这 段 代码 是 如 何 执行 的 。 


(调用 makeAdder(1) 时 得 到 了 内 层 add(..) 的 一 个 引用 ， 它 会 将 x 记 为 1。 我 们 将 这 个 函 
数 引 用 命名 为 plusone()。 

(2) 调用 makeAdder(10) 时 得 到 了 内 层 add(..) 的 另 一 个 引用 ， 它 会 将 x 记 为 09， 我 们 将 这 
个 函数 引用 命名 为 plusTen()。 

(3) 调用 plusone(3) 时 ， 它 会 向 1 ( 记 住 的 x) 加 上 3 (内 层 y)， 从 而 得 到 结果 4。 

(4) 调用 plusTen(13) 时 ， 它 会 向 10 ( 记 住 的 x) 加 上 13 (内 层 y)， 从 而 得 到 结果 23。 


























如 有 果 这 在 刚 开始 看 上 去 很 奇怪 ， 也 令 人 迷惑 的 话 ， 不 要 着 急 ! 你 需要 大 量 实践 才能 完全 理 


解 这 个 过 程 。 




















不 过 相信 我 ， 一 旦 你 理解 了 ， 它 就 会 成 为 所 有 编程 技术 中 最 为 强大 有 用 的 技术 。 它 绝对 值 
得 你 花费 一 些 脑力 去 理解 。 在 下 一 节 中 ， 我 们 将 针对 闭 包 进行 更 深 入 的 实践 。 

模块 

在 JavaScript 中 ， 闭 包 最 常见 的 应 用 是 模块 模式 。 模 块 允 许 你 定义 外 部 不 可 见 的 私有 实现 
细节 (变量 、 函 数 )， 同 时 也 可 以 提供 允许 从 外 部 访问 的 公开 API。 


考虑 : 




















function User(){ 
var Username, password; 


function doLogin(user,pw) { 
Username = User; 
password = pw; 


// 执行 剩 下 的 登录 工作 
var pubLicAPI = { 
login: doLogin 


上 


return publicAPI; 
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} 
// 创建 一 个 User 模 块 实例 


var fred = User(); 


fred.login( "fred", "12Battery34!" ); 


国 数 User() 用 作 外 层 作 用 域 ， 持 有 变量 usernane 和 password， 以 及 内 层 的 函数 
doLogin(); 这些 都 是 这 个 User 模块 私有 的 内 部 细节 ， 无 法 从 外 部 访问 。 











我 们 有 意 设 有 调用 new User()， 尽 管 这 事实 上 可 能 对 多 数 读 者 来 说 更 为 熟 
悉 。User() 只 是 一 个 国 数 ， 而 不 是 需要 实例 化 的 类 ， 所 以 只 是 正常 调用 就 可 
以 了 。 使 用 new 是 不 合适 的 ， 实 际 上 也 是 浪费 资源 。 




















执行 User() 创建 了 User 模块 的 一 个 实例 ， 这 创建 了 一 个 新 的 作用 域 ， 因 而 创建 了 所 有 内 
层 变量 / 国 数 的 一 个 新 副本 。 我 们 将 这 个 实例 赋 给 fred。 如 果 再 次 运行 User()， 那 么 会 得 
到 一 个 不 同 于 fred 的 全 新 实例 。 





内 层 的 函数 doLogin() 在 username 和 password 上 有 一 个 闭 包 ， 这 意味 着 即使 在 User() 函 
数 运行 完毕 之 后 ， 函 数 doLogin() 也 保持 着 对 它们 的 访问 权 。 


publicAPI 是 带 有 一 个 属性 /方法 Login 的 对 象 ，login 是 对 内 层 国 数 doLogin() 的 一 个 引 
用 。 当 我 们 从 User() 返回 publicAPI 时 ， 它 就 变 成 了 我 们 命名 为 fred 的 那个 实例 。 











此 时 ， 外 层 的 函数 User() 已 经 运行 完毕 。 我 们 通常 认为 像 username 和 password 这 样 的 内 
层 变量 也 就 随 之 消失 了 。 但 上 述 示例 并 不 会 这 样 ， 因 为 login() 函数 的 内 部 有 一 个 可 以 使 
得 它们 依然 保持 活跃 的 闭 包 。 











这 就 是 我 们 可 以 调用 fred.login(..) 的 原因 ， 这 等 同 于 调用 内 层 doLogin(..)， 并 且 fred. 
login(..) 仍然 可 以 访问 内 层 变量 username 和 password。 

这 里 只 是 对 闭 包 和 模块 模式 的 匆匆 一 上 着， 它们 的 某 些 细节 很 可 能 还 是 有 点 令 人 迷惑 。 没 关 
系 ! 让 你 的 大 脑 完全 理解 它 还 需要 一 些 努 力 。 


从 现在 开始 ， 阅 读本 系列 《你 不 知道 的 JavaScript (上 卷 )》 第 一 部 分 ， 这 有 助 于 你 更 进 一 
步 地 理解 这 些 知识 。 


2.6 ”this 标识 符 

JavaScript 中 男 一 个 被 普遍 误解 的 概念 是 this 关键 字 。 同 样 地 ， 本 系列 《你 不 知道 的 
JavaScript (上 卷 )》 第 二 部 分 中 有 几 章 内 容 是 专门 介绍 这 一 技术 的 ， 因 此 ， 这 里 只 是 简单 
地 介绍 一 下 概念 。 
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虽然 this 一 般 与 “面向 对 象 的 模式 ”相关 ， 但 JavaScript 中 的 this 则 是 另外 一 种 机 制 。 


如 果 一 个 函数 内 部 有 一 个 this 引用 ， 那 么 这 个 this 通常 指向 一 个 对 象 。 但 它 指 向 的 是 哪 
个 对 象 要 根据 这 个 函数 是 如 何 被 调用 来 决定 。 


this 并 不 指向 这 个 函数 本 身 ， 意 识 到 这 一 点 非常 重要 ， 因 为 这 是 最 常见 的 误解 。 
以 下 是 一 个 简单 的 说 明 : 


function foo() { 
console.log( this.bar ); 


} 
var bar = "global"; 


var obj1 = { 
bar: "obj1", 
foo: foo 


中 


var obj2 = { 
bar: "obj2" 


foo(); // “全 局 的 ” 
obj1.foo(); // "obj1" 
foo.call( obj2 ); // "obj2" 
new foo(); // undefined 


关于 如 何 设置 this 有 4 条 规则 ， 上 述 代 码 中 的 最 后 4 行 展 示 了 这 4 条 规则 。 


(1) 在 非 严格 模式 下 ，foo() 最 后 会 将 this 设置 为 全 局 对 象 。 在 严格 模式 下 ， 这 是 未 定义 的 
行为 ， 在 访问 bar 属性 时 会 出 错 一 一 因此 "global" 是 为 this.bar 创建 的 值 。 

(2) obj1.foo() 将 this 设置 为 对 象 obj1。 

(3) foo.caLL(obj2) 将 this 设置 为 对 象 obj2。 

(4) new foo() 将 this 设置 为 一 个 全 新 的 空 对 象 。 














底线 : 为 了 搞 清楚 this 指向 什么 ， 你 必须 检查 相关 的 函数 是 如 何 被 调用 的 。 调 用 方式 会 是 
以 上 4 种 之 一 ， 这 也 会 回答 “this 是 什么 ”这 个 问题 


有 关 this 的 更 多 信息 ， 参 见 本 系列 《你 不 知道 的 JavaScript (上 卷 )》 第 二 部 
分 中 的 前 两 章 。 
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2.7 原型 

JavaScript 中 的 原型 机 制 是 非常 复杂 的 。 这 里 我 们 仅仅 浅 谈 一 下 。 你 需要 花费 很 多 时 间 来 
阅读 本 系列 《你 不 知道 的 JavaScript (上 卷 )》 第 二 部 分 的 4~6 章 ， 以 了 解 所 有 细节 。 

当 引 用 对 象 的 某 个 属性 时 ， 如 果 这 个 属性 并 不 存在 ， 那 么 JavaScript 会 自动 使 用 对 象 的 内 
部 原型 引用 找到 另外 一 个 对 象 来 寻找 这 个 属性 。 你 可 以 将 这 点 看 作 是 属性 缺失 情况 的 备用 
模式 .。 
从 一 个 对 象 到 其 后 备 对 象 的 内 部 原型 引用 的 链接 是 在 创建 对 象 时 发 生 的 。 展 示 这 一 点 的 最 
简单 的 方法 就 是 使 用 内 置 工 具 0bject.create(..)。 


考虑 : 





























var foo = { 
a: 42 
二 


// 创建 bar 并 将 其 链接 到 foo 


var bar = Object.create( foo ); 








bar.b = "hello world"; 


bar.b; // "hello world" 
bar .a; // 42 <-- 委托 给 foo 


下 图 直观 地 展示 了 对 象 foo、bar 及 其 相互 关系 : 





prototype 
link 


b: “hello world” 

















对 象 bar 上 的 a 属性 实际 上 并 不 存在 ， 但 因为 bar 是 原型 链接 到 foo 的 ， 所 以 JavaScript 自 
动 跳 人 到 foo 对 象 上 搜索 a 属性 ， 并 且 成 功 找到 了 。 





这 种 链接 看 起 来 像 是 这 个 语言 的 奇怪 特性 。 这 个 特性 最 常见 的 使 用 (我 认为 是 误 用 ) 方式 
就 是 模拟 / 伪装 带 “ 继 承 ” 关 系 的 “类 ”机 制 。 

更 自然 应 用 原型 的 方式 是 被 称 为 “行为 委托 ”的 模式 ， 其 设计 意图 是 ， 被 链接 对 象 能 够 将 
其 所 需要 的 行为 委托 给 另外 一 个 对 象 。 
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有 关 原 型 和 行为 委托 的 更 多 信息 ， 参 见 本 系列 《你 不 知道 的 JavaScript (上 
卷 )》 第 二 部 分 的 4~6 童 。 





2.8 ”上 旧 与 新 
在 我 们 已 经 介绍 过 的 JavaScript 特性 和 本 系列 其 余 图 书 将 要 介绍 的 更 多 特性 中 ， 有 一 部 分 
特性 是 新 增 的 ， 旧 版 浏览 器 不 一 定 会 支持 这 样 的 特性 。 实 际 上 ， 标 准 中 的 部 分 最 新 特性 其 
至 还 没有 在 哪个 稳定 版 的 训 览 器 中 实现 。 


























那么 ， 应 该 怎样 对 待 这 些 新 特性 呢 ?” 是 不 是 只 能 等 几 年 其 至 几 十 年 ， 直 到 所 有 这 些 旧版 的 
训 览 器 退休 呢 ? 


很 多 人 都 是 这 么 认为 的 ， 但 这 对 JavaScript 来 说 实际 上 是 很 不 健康 的 一 种 思路 。 








你 可 以 使 用 两 种 主要 的 技术 ， 即 polyfilling 和 transpilling， 向 旧版 浏览 器 “引入 ”新 版 的 
JavaScript 特性 。 


2.8.1 polyfilling 

单词 “polyfll” 是 由 Remy Sharp 发 明 的 一 个 新 术语 (https://remysharp.com/2010/10/08/ 
what-is-a-polyfll) ， 用 于 表示 根据 新 特性 的 定义 ， 创 建 一 段 与 之 行为 等 价 但 能 够 在 旧 的 
JavaScript 环境 中 运行 的 代码 。 





举例 来 说 ，ES6 定义 了 一 个 名 为 Number .isNaN(..) 的 工具 ， 用 于 提供 一 个 精确 无 bug 的 
NaN 值 检查 ， 取 代 原 来 的 isNaN(..)。 但 对 这 个 工具 进行 兼容 处 理 很 容易 ， 这 样 一 来 ， 无 论 
终端 用 户 是 否 使 用 ES6 浏览 器 ， 你 都 能 够 开始 使 用 它 。 


考虑 : 











if (!Number.isNaN) { 
Number .isNaN = function isNaN(x) { 
return x !== x; 
}; 
} 
if 语句 防止 在 已 经 支持 此 特性 的 ES6 浏览 器 中 应 用 polyfill 定义 。 如 果 还 不 存在 的 话 ， 那 
我 们 就 定义 Number .iLsNaN(..)。 


我 们 进行 的 这 个 检查 利用 了 NaN 值 的 一 个 特性 ， 即 NaN 是 整个 语言 中 唯一 和 
自身 不 相等 的 值 。 因 此 ，NaN 是 使 得 x != x 为 真 的 唯一 值 。 
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并 非 所 有 的 新 特性 都 是 可 以 兼容 旧 环 境 的 。 有 时 一 个 特性 的 绝 大 部 分 可 以 兼容 旧 环 境 ， 但 
仍 有 微小 的 偏离 。 如 果 你 要 亲自 进行 polyfilling 的 话 ， 一 定 要 特别 小 心 ， 确 保 尽 可 能 严格 
地 遵循 标准 规定 。 

或 许 更 好 的 办 法 是 ， 使 用 一 个 已 有 的 、 可 信任 的 polyfilling 版 本 ， 比 如 由 ES5-Shim (https:/ 
2ithub.com/es-shims/es5-shim) 和 ES6-Shim (https://github.com/es-shims/es6-shim) 提供 的 版 本 。 











2.8.2 transpiling 

语言 中 新 增 的 语法 是 无 法 进行 polyfilling 的 。 新 语法 在 旧版 JavaScript 引擎 上 会 抛 出 未 识别 / 
无 效 错误 。 

因此 ， 更 好 的 方法 是 ， 通 过 工具 将 新 版 代码 转换 为 等 价 的 旧版 代码 。 这 个 过 程 通常 被 称 为 
“transpiling”。 它 是 由 transforming (转换 ) 和 compiling (编译 ) 组 合 而 成 的 术语 。 











从 本 质 上 来 说 ， 你 的 源码 是 用 新 语法 形式 编写 的 ， 但 部 署 在 浏览 器 上 的 是 编译 转换 后 的 旧 
语法 形式 。 通 常会 在 构建 过 程 中 插入 transpiler 工具 ， 类 似 于 代码 linter 或 者 minifier。 





你 可 能 会 疑惑 为 什么 要 这 么 麻烦 地 编写 新 语法 代码 ， 难 道 只 是 为 了 将 它 编译 转换 到 旧版 代 
码 一 一 为 什么 不 直接 编写 旧 语 法 代码 呢 ? 











有 几 点 重要 原因 使 得 transpiling 值得 被 关注 。 





。 语言 中 新 添加 的 语法 的 设计 目的 是 让 代码 更 容易 阅读 和 维护 。 等 价 的 旧版 本 通常 更 加 繁 
复 。 你 应 该 编写 更 新 、 更 简洁 的 语法 ， 这 不 只 是 为 你 自己 ， 同 时 也 是 为 开发 组 中 的 所 有 
其 他 成 员 着 想 。 

。 如 果 只 是 为 旧版 本 进行 编译 转换 ， 对 新 版 本 应 用 新 语法 ， 那 么 你 就 得 到 了 新 语法 浏览 器 
性 能 优化 的 好 处 。 这 也 使 得 浏览 器 开发 者 可 以 拥有 更 真实 的 代码 ， 以 便 测 试 它们 的 实现 
和 优化 。 

。 越 早 使 用 新 语法 ， 就 可 以 越 早 在 现实 世界 中 更 健壮 地 测试 这 些 语 法 ， 也 就 可 以 越 早 地 为 
JavaScript 委员 会 (TC39) 提供 反馈 。 如 果 能 够 很 早 就 发 现 问 题 ， 那 么 就 能 够 在 这 些 语 
言 设计 错误 被 固化 前 对 其 进行 修改 /修复 。 












































以 下 是 transpiling 的 一 个 简单 示例 。ES6 新 增 了 一 个 名 为 “默认 参数 值 ”的 新 特性 。 如 下 
所 示 : 











function foo(a = 2) { 
console.log( a ); 











foo(); // 2 

foo( 42 ); // 42 
很 简单 ， 对 不 对 ? 但 也 非常 有 用 ! 然而 这 个 新 语法 在 ES6 前 的 引擎 中 是 无 效 的 。 那 么 
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transpiler 是 如 何 改变 这 段 代 码 ， 从 而 让 其 能 够 在 旧 环 境 下 运行 的 呢 ? 


function foo() { 
var a = arguments[0] !== (void 0) ? arguments[0] : 2; 
console.log( a ); 


} 


正如 你 可 以 看 到 的 ， 它 会 检查 arguments[9] 的 值 是 否 为 void 6 (也 就 是 undefined)， 如 果 
是 的 话 就 提供 默认 值 2， 否 则 就 使 用 传 入 值 。 

除了 能 够 在 旧版 浏览 器 中 使 用 更 好 的 新 语法 ， 编 译 转换 后 的 代码 实际 上 也 更 好 地 表达 了 编 
程 意图 。 
单 看 这 段 ES6 版 本 的 代码 ， 你 可 能 不 会 意识 到 undefined 是 唯一 一 个 无 法 作为 默认 值 参数 
显 式 传 入 的 值 。 而 编译 转换 后 的 代码 就 更 清楚 地 展示 了 这 一 点 。 

关于 transpiler 最 后 要 强调 的 重要 细节 是 ， 现 在 应 该 将 它 看 作 是 JavaScript 开发 生态 环境 和 
过 程 的 一 个 标准 部 分 。JavaScript 将 会 持续 进化 ， 比 以 往 更 快 ， 所 以 每 隔 几 个 月 就 会 添加 
新 的 语法 和 特性 。 






































如 果 你 默认 使 用 transpiler， 只 要 发 现 新 的 语法 有 用 就 能 够 一 直 转 换 到 新 语法 ， 而 无 需 等 到 
多 年 以 后 当前 浏览 器 被 淘汰 。 


有 很 多 很 棒 的 transpiler 可 供 选 择 。 以 下 是 编写 本 部 分 时 几 个 很 好 的 选择 : 








。 Babel (https://babeljs.io/， 从 6 到 5) 
从 ES6+ 编译 转换 到 ES5 





。 Traceur (https://github.com/google/traceur-compiler) 
将 ES6、ES7 及 后 续 版 本 转换 到 ES5 


2.9 非 JavaScript 


到 目前 为 止 ， 我 们 介绍 的 内 容 都 局 限于 JavaScript 语言 本 身 。 而 现实 情况 是 ， 大 多 数 的 
JavaScript 都 是 编写 用 于 在 浏览 器 这 样 的 环境 中 运行 并 与 之 交互 的 。 严 格 来 说 ， 你 编写 的 
代码 很 大 一 部 分 并 不 直接 由 JavaScript 控制 。 这 听 起 来 有 点 奇怪 。 


你 将 遇 到 的 最 常见 的 非 JavaScript 就 是 DOM API。 举 例 来 说 : 














var el = document.getELementById( "foo" ); 
当 你 的 代码 在 浏览 器 中 运行 时 ， 变 量 document 作为 一 个 全 局 变量 存在 。 它 既 不 是 由 
JavaScript 引擎 提供 的 ， 也 不 由 JavaScript 标准 控制 。 它 的 存在 形式 看 起 来 非常 类 似 于 普 
通 的 JavaScript 对 象 ， 但 实际 上 并 不 完全 是 这 样 。 它 是 一 个 特殊 的 对 象 ， 通 常 被 称 为 “ 宿 
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另外 ，document 上 的 方法 getELementById(..) 看 起 来 像 是 一 个 正常 的 JavaScript 函数 ， 
但 它 其 实 是 浏览 器 的 DOM 提供 的 指向 内 置 方法 的 一 个 很 薄 的 暴露 接口 。 在 某 些 (新 版 
的 ) 浏览 器 中 ， 这 一 层 可 能 在 JavaScript 中 ,但 传统 的 DOM 及 其 行为 更 可 能 是 用 C/C++ 














另 一 个 示例 是 输入 /输出 (LO)。 


广 受 喜爱 的 alert(..) 会 在 用 户 浏览 器 窗口 弹出 一 个 消息 框 。alert(..) 是 由 浏览 器 提供 给 
JavaScript 程序 的 ， 而 不 是 由 JavaScript 引 获 本 身 提供 。 你 发 起 的 调用 将 消息 发 送 到 浏览 器 
内 部 ， 然 后 由 它 负 责 绘 制 并 显示 消息 框 。 




















console.1log(..) 也 是 如 此 ， 你 的 浏览 器 提供 了 这 样 的 机 制 并 将 其 连接 到 开发 者 工具 中 。 








本 书 以 及 本 系列 主要 关注 JavaScript 语言 。 因 此 你 不 会 看 到 这 些 非 JavaScript 的 机 制 。 但 你 
需要 了 解 这 些 知 识 ， 因 为 你 编写 的 每 个 JavaScript 程序 都 需要 用 到 它们 1! 








2.10 小结 

学 习 使 用 JavaScript 编程 的 第 一 步 就 是 要 了 人 解 其 核心 机 制 ， 比 如 值 、 类 型 、 函 数 闭 包 、 
this 以 及 原型 。 

当然 ， 你 在 本 部 分 看 到 的 每 个 主题 都 值得 更 深入 的 学 习 ， 这 也 是 本 系列 其 他 部 分 专门 讲述 
这 些 概念 的 原因 。 充 分 理解 本 章 中 的 概念 和 代码 示例 后 ， 本 系列 的 其 他 部 分 就 等 着 你 去 真 
正 挖 气 了 ， 希 望 你 能 对 这 门 语言 获得 更 深入 的 理解 。 









































本 部 分 的 最 后 一 章 简单 总 结 了 本 系列 其 他 部 分 的 主题 ， 以 及 那些 我 们 还 没有 讨论 过 的 概念 。 
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第 3 章 


深入 “你 不 知道 的 JavaScript ”系列 





这 个 系列 到 底 讲 了 什么 ? 简单 地 说 ， 这 个 系列 视 学 习 全 部 的 JavaScript 为 一 个 严肃 的 
任务 ， 不 仅仅 是 这 门 语 言 中 被 称 为 “精髓 ”的 某 个 子 集 ， 也 不 是 你 完成 工作 所 需要 的 最 


小 集合 。 














学 习 其 他 语言 的 认真 的 开发 者 会 想 要 花费 精力 学 习 他 们 使 用 的 主要 语言 的 方方面面 ， 但 
JavaScript 开发 者 却 通常 不 会 学 习 这 个 语言 的 很 多 内 容 ， 从 这 个 意义 上 来 说 ， 他 们 似乎 是 
特 立 独行 的 。 这 并 不 是 好 事情 ， 也 不 是 我 们 应 该 继续 放任 其 发 展 的 事情 。 






































“你 不 知道 的 JavaScript” 系 列 与 普遍 的 JavaScript 学 习 方法 形成 鲜明 对 比 ， 儿 平 与 任何 其 
他 你 能 读 到 的 JavaScript 相关 书籍 都 有 所 不 同 。 它 能 够 让 你 超越 自己 的 舒适 区 ， 对 遇 到 的 
每 个 特性 提出 更 深层 次 的 “为 什么 ”"。 你 准备 好 迎接 挑战 了 吗 ? 
































我 将 在 本 章 中 简单 总 结 一 下 本 系列 其 余 几 本 图 书 的 内 容 ， 以 及 如 何 基于 这 个 系列 最 有 效 地 
构建 JavaScript 学 习 的 基础 。 


3.1 作用 域 和 闭 包 


参见 《你 不 知道 的 JavaScript (上 卷 )》 第 一 部 分 。 














变量 的 作用 域 到 底 是 如 何在 JavaScript 中 工作 的 ? 这 可 能 是 你 需要 快速 理解 的 一 个 最 基础 
的 事情 了 。 对 作用 域 具 有 道听途说 、 模 糊 不 清 的 理解 是 不 够 的 。 




















“作用 域 和 闭 包 ”这 部 分 从 批判 JavaScript 是 “解释 性 语言 ”因而 无 法 编译 这 一 常见 误解 开 
始 。 事 实 并 非 如 此 。 
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JavaScript 引擎 在 执行 前 《有 时 是 执行 中 ! ) 就 编译 了 代码 。 因 此 ， 通 过 深入 理解 编译 器 
对 代码 的 处 理 方式 ， 我 们 可 以 尝试 理解 它 是 如 何 找到 并 处 理 变量 和 函数 声明 的 。 沿 着 这 条 
路 ， 我 们 看 到 了 JavaScript 变量 作用 域 管理 的 常见 方式 一 一 “提升 ”。 

对 “词法 作用 域 ”的 关键 理解 是 我 们 在 上 卷 第 一 部 分 最 后 一 章 继续 研究 闭 包 的 基础 。 闭 包 


可 能 是 JavaScript 所 有 概念 中 最 重要 的 一 个 ， 但 如 果 你 没 腔 刻 了 解 作用 域 的 工作 原理 ， 
那么 很 可 能 就 无 法 理解 闭 包 。 



































正如 我 们 在 第 2 章 中 简单 提 到 的 那样 ， 闭 包 的 一 个 重要 应 用 就 是 模块 模式 。 模 块 模式 可 能 
是 JavaScript 所 有 代码 组 织 模式 中 最 普遍 的 方法 ; 深入 理解 模块 模式 应 该 是 你 最 高 优先 级 
的 任务 之 一 。 


3.2 ”this 和 对 和 象 原型 


参见 《你 不 知道 的 JavaScript (上 卷 )》 第 二 部 分 。 

















有 关 JavaScript 流传 最 广 、 最 持久 的 不 实 论点 是 ， 关 键 词 thts 指向 它 所 在 的 函数 。 这 简直 
错 得 离谱 。 

关键 词 this 是 根据 相关 国 数 的 执行 方式 而 动态 绑 定 的 ， 事 实证 明 ， 可 以 通过 4 条 简单 的 
则 理解 并 完全 确定 this 绑 定 。 

与 thts 紧密 关联 的 是 对 象 原型 机 制 ， 这 种 机 制 是 一 个 属性 查找 链 ， 与 寻找 词法 作用 域 变 


量 
的 方式 类 似 。 但 在 原型 中 进行 封装 ， 即 模拟 (伪造) 类 和 (所谓 “原型 化 的 ") 继承 ， 是 
对 JavaScript 的 另 一 个 重大 误 用 。 





汪 





不 幸 的 是 ， 将 类 和 继承 的 设计 模式 思维 带 入 JavaScript 的 想法 是 你 所 做 的 最 坏 的 事情 ， 因 
为 语法 可 能 会 让 你 迷惑 不 已 ， 让 你 以 为 真 的 有 类 这 样 的 东西 存在 ， 实 际 上 原型 机 制 与 类 的 
行为 特性 是 完全 相反 的 。 

问题 是 ， 忽 略 这 种 不 一 致 性 而 假装 你 实现 的 就 是 “继承 ”更 好 ， 还 是 学 习 和 接受 对 象 原型 
系统 真实 的 工作 方式 更 有 益 呢 ? 后 者 被 更 合理 地 命名 为 “行为 委托 ”。 

这 不 只 是 语法 偏好 的 问题 。 委 托 是 完全 不 同 的 设计 模式 ， 也 更 加 强大 ， 它 取代 了 需要 类 和 
继承 的 设计 。 但 是 这 些 判断 违背 了 这 个 主题 在 JavaScript 的 整个 生命 周期 的 每 个 博文 、 图 
书 和 会 议 发 言 中 的 说 法 。 

我 对 委托 与 继承 的 看 法 并 非 出 自 对 这 门 语言 及 其 语法 的 厌恶 ， 而 是 来 自 对 使 用 这 个 语言 真 
实 能 力 的 期 待 ， 以 及 消除 无 休止 的 迷惑 和 诅 形 的 期 待 。 

但 我 就 原型 和 委托 给 出 的 解释 示例 要 比 这 里 的 内 容 这 入 许多 。 如 果 你 已 经 准备 好 重新 思考 
对 JavaScript 的 “类 ”和 “继承 ”的 所 有 认 知 ， 那 么 我 为 你 提供 “ 吃 下 红色 药丸 ”(《 黑 客 
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帝国 》，1999) 的 机 会 ， 了 阅读 “this 和 对 象 原 型 ”这 部 分 的 第 4~6 章 吧 。 


3.3 ”类 型 和 语法 
参见 《你 不 知道 的 JavaScript (中 卷 )》 第 一 部 分 。 


“类 型 和 语法 ”这 部 分 主要 关注 另 一 个 高 度 和 争议 的 主题 : 强制 类 型 转换 。 当 讨论 有 关 隐 式 
类 型 转换 的 迷惑 时 ， 设 有 比 这 个 主题 更 令 JavaScript 开发 者 烦恼 的 了 。 

到 目前 为 止 ， 传 统 的 认 知 是 ， 隐 式 类 型 转换 是 这 个 语言 中 “ 坏 的 部 分 "， 应 该 不 惜 代价 地 
予以 避免 。 实 际 上 ， 有 些 人 其 至 称 其 为 这 个 语言 的 设计 “缺陷 ”。 确 实 ， 一 些 工 具 所 做 的 
所 有 事情 就 是 搜索 代码 ， 抱 怨 你 是 否 进行 了 类 型 转换 这 样 的 事情 。 

但 是 ， 类 型 转换 是 否 真 的 这 么 令 人 迷惑 、 这 人 么 坏 、 这 么 危险 ， 以 至 于 你 一 使 用 就 会 毁灭 自 
己 的 代码 呢 ? 
































我 认为 并 非 如 此 。 在 第 1~3 章 理解 了 类 型 和 值 到 底 是 如 何 工作 的 后 ， 第 4 章 讨论 了 这 个 争 
议 ， 并 完整 地 解释 了 类 型 转换 是 如 何 工 作 的 ， 包 括 所 有 的 边 边 角 角 。 























我 们 会 看 到 ， 到 底 类 型 转换 的 哪些 部 分 是 出 乎 意料 的 ， 哪 些 部 分 在 花费 精力 学 习 后 则 是 完 
全 可 以 理解 的 。 




















这 不 仅仅 只 是 声称 类 型 转换 是 合理 的 、 可 学 习 的 ;我 想 表 明 的 是 ， 类 型 转换 是 非常 有 用 且 
被 低估 了 的 工具 ， 你 应 该 在 自己 的 代码 中 使 用 它 。 在 我 看 来 ， 如 果 能 够 正确 使 用 的 话 ， 类 
型 转换 不 仅 能 够 工作 ， 而 且 也 会 让 你 的 代码 质量 更 高 。 所 有 的 反对 者 和 怀疑 者 肯定 会 嘲笑 
这 样 的 立场 ， 但 我 坚信 这 是 提高 你 JavaScript 水 平 的 关键 一 点 。 





你 只 想 人 云 亦 云 、 随 波 逐 流 吗 ? 还 是 你 愿意 将 所 有 的 假设 放 到 一 边 ， 用 全 新 的 视角 来 观察 
类 型 转换 ?” “类 型 与 语法 ”部 分 将 会 转换 你 的 思路 。 


3.4 异步 和 性 能 


参见 《你 不 知道 的 JavaScript (中 卷 )》 第 二 部 分 。 





“作用 域 和 闭 包 ”“this 和 对 象 原型 ”以 及 “类 型 和 语法 ”关注 的 都 是 语言 的 核心 机 制 ， 而 
“异步 和 性 能 ” 则 稍微 偏重 于 在 语言 机 制 之 上 处 理 异步 编程 的 模式 。 异 步 不 只 是 对 应 用 的 
性 能 至 关 重 要 ， 而 且 正 在 慢 慢 成 为 代码 易 写 性 和 可 维护 性 方面 的 关键 因素 。 

“异步 和 性 能 ”部 分 一 开始 明确 了 大 量 的 术语 和 概念 ， 如 “异步 “并 行 ” 和 “并 发 ”这 些 
概念 ， 并 深入 解释 了 这 些 概念 为 什么 适用 或 不 适用 于 JavaScript。 


然后 我 们 查看 了 回调 这 个 使 得 异步 成 为 可 能 的 基本 方法 。 但 我 们 很 快 就 看 到 ， 单 独 使 用 回 
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调 完 全 不 足以 满足 当代 异步 编程 的 需求 。 我 们 确定 了 两 种 只 用 回调 编码 的 缺陷 : 控制 反 转 
(Inversion of Control，IoC) 信任 缺失 和 线性 理解 能 力 的 缺失 。 














为 了 避免 这 两 个 主要 的 缺陷 ，ES6 引入 了 新 的 机 制 《实际 上 是 模式 ) : promise 和 生成 器 。 


promise 是 对 “未 来 值 ”的 与 时 间 无 关 的 封装 ， 使 得 不 管 这 个 值 是 否 已 经 可 用 ， 你 都 可 以 
推导 和 组 合 使 用 它们 。 另 外 ， 通 过 一 种 可 信任 的 、 可 组 合 的 promise 机 制 ， 分 发 回调 它们 
也 有 效 地 解决 了 IoC 信任 问题 。 


生成 器 为 JavaScript 函数 引入 了 一 种 新 的 执行 模式 ， 其 中 生成 器 可 以 暂停 在 yield 点 上 ， 
并 在 之 后 被 异步 继续 。 和 暂停 与 继续 的 能 力 使 得 生成 器 中 同步 的 、 看 似 连 续 的 代码 可 以 在 后 
台 异 步 执 行 。 通 过 这 种 方式 ， 我 们 解决 了 回调 的 非 线 性 、 非 局 部 跳 转 引 发 的 代码 混乱 问 
题 ， 因 而 让 我 们 的 异步 代码 看 似 同步 ， 更 容易 追踪 。 























但 是 ，promise 和 生成 器 的 组 合 “暂缓 ”了 我 们 最 有 效 的 异步 编码 模式 进入 JavaScript 的 
日 程 。 实 际 上 ，ES7 及 更 新 版 本 中 即将 出 现 的 异步 的 高 级 机 制 很 大 程度 上 是 建立 在 这 个 
基础 上 的 。 要 想 在 异步 的 世界 中 严肃 地 对 待 程序 效率 ， 你 需要 非常 熟悉 promise 和 生成 
器 的 组 合 。 


如 果 说 promise 和 生成 器 与 表达 模式 有 关 ， 这 种 模式 使 得 我 们 的 程序 可 以 更 加 并 发 地 运行 ， 
因此 能 在 更 短 的 时 间 内 处 理 完毕 ， 那 么 JavaScript 还 有 很 多 其 他 的 性 能 优化 因素 值得 探讨 。 


























第 5 章 探讨 了 通过 Web Worker 实现 程序 并 行 和 通过 SIMD 实现 数据 并 行 的 主题 ， 以 及 像 
ASMJjs 这 样 的 底层 优化 技术 。 第 6 章 从 合适 的 测评 技术 角度 介绍 了 性 能 优化 ， 甚 中 包括 哪 
些 类 型 的 性 能 需要 关注 ， 哪 些 可 以 忽略 。 








编写 高 效 的 JavaScript 代码 意味 着 ， 你 编写 的 代码 可 以 打破 不 同 浏 览 器 和 环境 的 壁 至 ， 达 
到 动态 运行 。 这 要 求 大 量 复杂 而 详细 的 计划 和 努力 ， 只 有 这 样 ， 才 能 让 程序 从 “可 以 运 
行 ” 到 “可 以 很 好 地 运行 ”。 

“异步 和 性 能 ”部 分 的 目的 是 ， 为 你 提供 编写 合理 、 高 性 能 JavaScript 代码 所 需要 的 所 有 工 
有 具 和 技巧 。 


3.5 ES6 及 更 新 版 本 


参见 本 书 第 二 部 分 。 
































不 管 你 认为 自己 此 时 对 JavaScript 已 经 有 了 怎样 的 和 掌握， 事实 是 JavaScript 一 直 在 持续 发 
展 ， 而 且 ， 发 展 的 速度 越 来 越 快 。 这 个 事实 几乎 就 是 本 系列 精神 的 隐喻 ， 你 需要 接受 我 们 
永远 无 法 完全 了 解 JavaScript 这 个 事实 ， 因 为 即使 你 掌握 了 所 有 内 容 ， 还 是 会 出 现 你 需要 
学 习 的 新 东西 。 
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邮 





这 个 主题 为 这 门 语言 的 发 展 方向 提供 了 短期 和 中 期 的 展望 ， 不 只 是 ES6 这 样 已 知 的 方向 ， 
还 有 在 其 之 后 可 能 的 方向 。 




















本 系列 中 的 所 有 内 容 都 是 根据 撰写 时 的 JavaScript 的 状态 编写 的 ， 即 ES6 的 接受 期 。 本 系 
列 的 关注 点 更 多 在 ES5 上 上。 现在， 我们 要 将 注意 力 放 在 ES6、ES7 及 更 远 的 未 来 …… 





既然 编写 本 系列 时 ES6 已 经 接近 完成 ,“ES6 及 更 新 版 本 ”部 分 一 开始 就 将 ES6 中 的 具体 
内 容 分 成 了 几 个 关键 的 类 别 ， 其 中 包括 新 语法 、 新 数据 结构 (集合 ) 以 及 新 处 理 能 力 和 
API。 我 们 将 介绍 ES6 的 每 一 个 新 特性 ， 详 细 程 度 有 所 不 同 ， 并 且 还 会 回顾 本 系列 其 他 部 
分 提 到 的 细节 。 











预先 列 出 令 人 兴奋 的 ES6 特性 : 解构 、 默 认 参 数值 、 符 号 、 简 洛 方 法 、 计 算 属 性 、 箭 头 函 
数 、 块 作用 域 、promise、 生 成 器 、 迭 代 器 、 模 块 、 代 理 、WeakMap， 以 及 更 多 |! 啊 ，ES6 
确实 改进 了 不 少 ! 














“ES6 及 更 新 版 本 ”的 前 面 是 一 个 线路 图 ， 可 以 帮助 你 了 解 改进 后 的 JavaScript， 这 可 是 你 
在 未 来 几 年 里 需要 编写 和 探索 的 JavaScript。 其 后 面 简单 关注 了 我 们 有 把 握 在 JavaScript 的 
近期 可 期 待 的 新 特性 。 最 重要 的 实现 就 是 后 ES6，JavaScript 很 可 能 是 一 个 特性 一 个 特性 地 
演化 ， 而 不 是 一 个 版 本 一 个 版 本 地 演化 ， 这 意味 着 这 些 近 期 将 要 出 现 的 特性 可 能 会 比 你 想 
象 的 更 快 到 来 。 


JavaScript 的 未 来 是 光明 的 。 是 时 候 开 始 学 习 了 吧 ! 




















3.6 小结 


“你 不 知道 的 JavaScript” 系 列 的 宗旨 是 ， 所 有 的 JavaScript 开发 者 都 可 以 ， 也 应 该 学 习 这 
门 伟大 语言 的 方方面面 。 个 人 偏见 、 框 架 假 定 和 项 目的 截止 日 期 都 不 应 该 成 为 你 从 不 学 习 
和 深入 理解 JavaScript 的 借口 。 




















我 们 覆盖 了 这 门 语言 中 每 个 重要 的 焦点 领域 ， 完 整地 探索 了 所 有 你 可 能 以 为 自己 已 经 了 
解 ， 却 并 没有 完全 理解 的 部 分 。 
“你 不 知道 的 JavaScript” 既 不 是 批判 也 不 是 攻击 。 这 是 一 种 领悟 ， 是 包括 我 自己 在 内 的 


所 有 人 都 必须 接受 的 事实 。 学 习 JavaScript 不 是 最 终 目标 ， 而 是 一 个 过 程 。 我 们 还 不 了 解 
JavaScript。 但 我 们 终 将 做 到 这 一 点 ! 
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第 二 部 分 


ES6 及 更 新 版 本 
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Kyle Simpson 是 一 位 续 密 的 务实 主义 者 。 

这 是 我 能 想到 的 最 高 赞美 。 对 我 来 说 ， 这 是 软件 开发 者 必须 具备 的 最 重要 的 品质 。 对 ， 是 
必须 而 不 是 应 该 。 把 JavaScript 编程 语言 的 各 个 层次 梳理 清楚 ， 并 以 含义 丰富 且 易 于 理解 
的 形式 呈现 出 来 ，Kyle 在 这 方面 的 敏锐 能 力 是 首届 一 指 的 。 








“你 不 知道 的 JavaScript” 系 列 的 读者 将 会 了 解 “ ES6 及 更 新 版 本 ， 从 最 直观 的 到 那些 我 
们 一 直 认 为 理所当然 或 者 从 未 想到 的 微妙 语义 ， 他 们 将 会 沉浸 于 其 间 。 到 目前 为 止 ,“ 你 
不 知道 的 JavaScript” 系 列 图 书 履 盖 的 内 容 是 读者 至 少 在 某 种 程度 上 已 经 熟悉 的 ， 看 到 或 
者 听 说 过 这 些 主题 ， 甚 至 可 能 实践 过 。 而 本 书 这 一 部 分 将 要 介绍 的 内 容 只 有 JavaScript 开 
发 者 社区 的 很 少 一 部 分 人 有 所 了 解 ， 即 ECMAScript 2015 语言 规范 的 发 展 变化 。 



























































过 去 几 年 里 ， 我 看 到 了 Kyle 不 懈 努 力 地 学 习 熟 悉 这 部 分 内 容 ， 最 终 达 到 了 只 有 少数 专业 
人 士 所 能 精通 的 程度 。 在 他 写作 这 部 分 内 容 时 ，ECMAScript 2015 语言 规范 文档 还 没有 正 
式 发 布 ， 能 考虑 到 这 一 点 是 多 么 地 了 不 起 ! 我 所 说 的 千 真 万 确 ， 我 阅读 了 Kyle 为 这 一 内 
容 所 写 的 每 一 个 字 。 我 还 跟踪 了 他 的 所 有 修改 ， 每 一 次 修改 都 是 对 内 容 的 改进 ， 为 我 们 提 
供 了 更 深层 次 的 认识 。 


这 些 内 容 展示 了 未 知 的 新 知识 ， 以 此 来 触发 读者 的 思考， 使 你 的 知识 储备 与 工具 一 起 进 
化 。 它 还 会 为 读者 增加 信心 来 彻底 拥抱 JavaScript 编程 的 下 一 个 重要 时 代 。 




















Rick Waldron (@rwaldron), Bocoup 公司 开源 Web 开发 者 ，Ecma/TC39 jQuery 代表 
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第 1 章 


ES? 现在 与 未 来 








在 深入 阅读 本 部 分 之 前 ， 你 应 该 已 经 能 够 熟练 应 用 (直到 编写 本 部 分 时 ) 最 新 标准 下 的 
JavaScript 工作 了 ， 这 个 标准 通常 被 称 为 ES5 (严格 说 是 ES5.1)。 本 部 分 中 ， 我 们 将 会 直 
接 介 绍 ES6， 同 时 也 会 扩展 视野 ， 理 解 JavaScript 未 来 的 发 展 方向 。 


如 果 你 对 自己 的 JavaScript 水 平 还 不 是 那么 有 信心 的 话 ， 我 强烈 建议 你 先 阅 读 一 下 本 系列 
《你 不 知道 的 JavaScript (上 卷 )》 和 《你 不 知道 的 JavaScript (中 卷 )》 中 的 儿 部 分 内 容 。 




















。 作用 域 和 闭 包 :你 知道 JavaScript 的 词法 作用 域 是 基于 编译 器 (而 非 解释 器 ! ) 语 义 的 吗 ? 
尔 能 解释 词法 作用 域 和 作为 值 的 函数 这 两 者 的 直接 结果 之 一 就 是 闭 包 吗 ? 

。 this 和 对 象 原型 : 你 能 复述 this 绑 定 的 四 条 基本 原则 吗 ? 你 是 否 还 在 用 JavaScript 的 
“ 伪 ” 类 应 付 了 事 ， 而 没有 采用 更 简洁 的 “行为 委托 ”设计 模式 ?你 听 说 过 连接 到 其 他 
对 象 的 对 象 (objects linked to other objects，OLOO) 吗 ? 

。 类 型 和 语法 : 你 了 解 JavaScript 中 的 内 置 类 型 吗 ? 更 重要 的 是 ， 你 了 解 如 何 正确 安全 地 使 
用 类 型 间 强 制 转换 吗 ? 对 于 JavaScript 语法 / 句法 中 的 微妙 细节 ， 你 的 熟悉 程度 又 如 何 ? 

。 异步 和 性 能 : 你 还 在 使 用 回调 管理 异步 吗 ? 你 能 解释 promise 是 什么 以 及 它 为 什么 /如 
何 能 够 解决 “回调 地 狱 ”这 个 问题 吗 ? 你 知道 如 何 应 用 生成 器 来 使 得 异步 代码 更 加 清晰 
吗 ? 对 JavaScript 程序 和 有 具体 运算 的 深度 优化 到 底 由 哪些 方面 构成 ? 

。 起 步 上 路 : 你 还 是 编程 新 手 或 者 JavaScript 新 手 吗 ? 这 是 你 起 步 之 时 需要 了 解 的 技术 发 
展 路 线 (本 书 第 一 部 分 )。 


如 果 你 阅读 了 前 面 所 有 内 容 ， 并 对 其 覆盖 的 主题 有 了 足够 的 信心 ， 现 在 是 我 们 深入 探索 
JavaScript 已 经 到 来 的 及 更 远 未 来 将 会 出 现 的 改变 的 时 候 了 。 
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与 ES5 不 同 ，ES6 并 不 仅仅 是 为 这 个 语言 新 增 一 组 API。 它 包括 一 组 新 的 语法 形式 ， 其 中 
的 一 部 分 可 能 是 要 花 些 时间 才 能 理解 和 熟悉 的 。 它 还 包括 各 种 各 样 的 新 的 组 织 形 式 和 操作 
各 种 数据 类 型 的 新 的 辅助 API。 

对 于 这 个 语言 来 说 ，ES6 是 一 次 激进 的 飞跃 。 即 使 你 认为 自己 对 JavaScript ES5 已 经 相当 
了 解 ，ES6 还 是 有 大 量 你 不 知道 的 全 新 内 容 。 所 以 做 好 准备 吧 ! 这 里 探讨 了 你 需要 了 解 的 
ES6 的 所 有 重要 主题 ， 并 且 简单 介绍 了 你 可 能 还 设 有 意识 到 的 未 来 将 会 出 现 的 特性 。 








本 部 分 中 的 所 有 代码 假定 运行 环境 为 ES6+。 在 编写 本 部 分 的 时 候 ， 各 种 浏 
览 器 和 JavaScript 环境 (比如 Node.js) 对 ES6 的 支持 程度 差异 巨大 ， 所 以 运 
行 结果 可 能 也 会 有 所 差异 。 











1.1 版 本 


JavaScript 标准 的 官方 名 称 是 “ECMAScript” (简称 “ES” ) ， 直 到 最 近 都 是 用 有 序数 字 来 标 
识 版 本 的 ， 例 如 “5” 表 示 “ 第 5 版 ”。 


最 早 的 JavaScript 版 本 是 ES1 和 ES2， 它 们 不 怎么 为 人 所 知 ， 实 现 也 很 少 。 第 一 个 流行 起 
来 的 JavaScript 版 本 是 ES3， 它 成 为 浏览 器 IE6-8 和 早 前 的 旧版 Android 2.x 移动 浏览 器 的 
JavaScript 标准 。 出 于 某 些 政治 原因 ， 倒 霉 的 ES4 从 来 没有 成 形 ， 这 里 我 们 不 做 讨论 。 





2009 年 ，ES5 正式 发 布 (然后 是 2011 年 的 ES5.1)， 在 当代 浏览 器 (包括 Firefox、Chrome、 
Opera、Safari 以 及 许多 其 他 类 型 ) 的 进化 和 爆发 中 成 为 JavaScript 广泛 使 用 的 标准 。 


下 一 个 JavaScript 版 本 (发布 日 期 从 2013 年 拖 到 2014 年 ， 然 后 又 到 2015 年 ) 标签 ， 之 前 
的 共识 显然 是 ES6。 


但 是 ， 在 ES6 规范 发 展 后 期 , 出 现 了 这 样 的 方案 : 有 人 建议 未 来 的 版 本 应 该 改 成 基于 年 
份 ， 比 如 ES2016 (也 就 是 ES7) 来 标示 在 2016 年 结束 之 前 斋 定 的 任何 版 本 的 规范 。 尽 管 
有 异议 ， 但 比 起 后 来 提出 的 方案 ES2015， 很 可 能 保持 统治 地 位 的 版 本 命名 仍 是 ES6。 而 
ES2016 可 能 会 采用 新 的 基于 年 份 的 命名 方案 。 


人 们 已 经 观察 到 ，JavaScript 的 发 展 步伐 要 比 每 年 一 个 版 本 快 得 多 。 一 旦 一 个 想法 进入 标 
准 讨论 阶段 ， 浏 览 器 就 会 开始 为 这 个 特性 开发 原型 ， 早期 的 使 用 者 也 就 会 开始 编码 进行 
试验 了 。 


对 于 一 个 特性 来 说 ， 通 常 在 官方 正式 批准 之 前 很 入 ， 通 过 早期 的 引擎 /工具 原型 ， 这 个 特 
性 就 已 经 事实 上 标准 化 了 。 所 以 ， 把 JavaScript 未 来 的 版 本 看 成 基于 单个 特性 ， 而 不 是 基 
于 某 一 组 主要 特性 组 合 为 单位 〈 就 像 现 在 ) 的 新 版 本 ， 甚 至 是 每 年 一 个 版 本 〈 就 像 以 后 采 
用 的 形式 )， 也 是 合理 的 。 
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这 带 来 的 结果 是 ， 版 本 标签 已 经 不 再 那么 重要 ，JavaScript 开始 被 看 作 更 像 是 一 个 发 展 的 
oe 对 待 这 一 结果 最 好 的 办 法 是 别 再 把 你 的 代码 看 作 是 基于 版 本 的 ， 比 如 “基于 
， 而 是 去 考虑 它 有 具体 支持 哪些 单独 的 特性 。 











1.2 transpiling 


特性 演变 迅速 也 让 JavaScript 开发 者 遇 到 了 问题 ， 他 们 非常 想 要 使 用 新 特性 ， 但 同时 又 被 
现实 所 困 ， 他 们 的 网 站 /app 可 能 需要 支持 并 未 提供 这 些 新 特性 的 旧版 浏览 器 ， 而 功能 特性 
的 快速 进化 使 得 这 个 问题 更 加 严峻 。 


ES5 广泛 应 用 于 工业 界 的 过 程 中 ， 其 典型 思路 是 要 等 到 绝 大 多 数 一 一 如 果 不 说 所 有 一 一 前 
ES5 环境 都 不 再 需要 被 支持 的 时 候 ， 代 码 才 采 用 ES5。 结 果 是 ， 很 多 实现 才 开 始 (在 编 
写本 部 分 的 时 候 ) 使 用 像 strict 模式 这 样 的 特性 ， 而 这 早 在 五 年 以 前 就 已 经 出 现在 ES5 
中 了 。 


人 们 普遍 认为 ， 落 后 规范 这 么 多 年 对 于 JavaScript 生态 系统 的 未 来 是 有 害 的 。 所 有 负责 语 
ee 新 的 特性 和 模式 一 旦 在 标准 中 稳定 下 来 ， 并 且 浏 览 器 能 够 实现 它们 
之 后 ， 就 能 够 在 开发 者 的 代码 中 得 到 应 用 。 


所 以 我 们 如 何 解决 这 个 矛盾 呢 ? 答案 是 工具 化 〈 提 供 工 具 )。 上 有 具体 来 说 是 一 种 称 为 
transpiling (transformation 十 compiling， 转 换 十 编译 ) 的 技术 。 简 单 地 说 ， 其 思路 是 利用 
专门 的 工具 把 你 的 ES6 代码 转化 为 等 价 (或 近似 ! ) 的 可 以 在 ES5 环境 下 工作 的 代码 。 


举例 来 说 ， 考 虑 短路 属性 定义 (参见 2.6 节 )。 下 面 是 ES6 形式 : 
























































var foo = [1,2,3]; 
var obj = { 
foo // 也 就 是 foo: foo 
3 
obj.foo; J E23 
而 下 面 是 转化 后 的 (大致) 代码 : 
Var foo =: [132;31]; 
var obj = { 
foo: foo 
和 


obj .foo; // [1,2,3] 





这 个 变换 很 小 但 能 给 人 带 来 方便 ， 使 我 们 在 同名 的 时 候 ， 可 以 把 对 象 字面 声明 的 foo: foo 
简写 为 foo。 
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通常 在 构建 过 程 中 使 用 transpiler 执行 这 些 转 换 ， 如 同 执行 linting、minification， 或 者 其 他 
类 似 操作 的 步骤 。 


shim/polyfill 

并 非 所 有 的 ES6 新 特性 都 需要 使 用 transpiler， 还 有 polyfill (也 称 为 shim) 这 种 模式 。 
在 可 能 的 情况 下 ，polyfill 会 为 新 环境 中 的 行为 定义 在 旧 环 境 中 的 等 价 行为 。 语 法 不 能 
polyfll， 而 API 通常 可 以 。 

举例 来 说 ，0bject.is(..) 是 一 个 用 于 检查 两 个 值 严 格 相等 的 新 工具 ， 而 且 不 像 === 那样 在 
处 理 NaN 和 -9 值 的 时 候 有 微妙 的 例外 情况 。 对 0bject.is(..) 应 用 polyfill 非常 简单 ; 








if (!Object.is) { 
Object.is = function(v1i, v2) { 
// 检查 -0 
if (v1 === 0 && v2 === 0) { 
return 1 / v1 === 1 / v2; 


} 

// 检查 NaN 

if (v1 !== v1) { 
return v2 !== v2; 

} 

// 其 余 所 有 情况 


return v1 === v2; 





} 











注意 这 个 polyfill 外 层 用 于 保护 的 if 语句 。 这 个 细节 很 重要 ， 它 表示 这 段 代 
码 只 定义 了 在 未 定义 API 的 旧 环 境 下 的 行为 ， 需要 覆盖 已 经 存在 的 API 的 情 
况 是 非常 罕见 的 。 





这 里 有 一 组 名 为 “ES6 Shim” 的 ES6 shim 实现 (https:// github.com/paulmillr/es6-shim/)， 
你 一 定 要 把 它 作 为 一 个 标准 放 在 你 所 有 的 JavaScript 新 项 目 中 。 


人 们 认为 JavaScript 会 持续 不 断 地 发 展 ， 浏 览 器 会 逐渐 地 而 不 是 以 大 规模 突变 的 形式 支持 
新 特性 。 所 以 ， 保 持 JavaScript 发 展 更 新 的 最 好 战略 就 是 在 你 的 代码 中 引入 polyfill shim， 
并 且 在 构建 过 程 中 加 入 transpiler 步骤 ， 现 在 就 开始 接受 并 习惯 这 个 新 现实 吧 。 





如 有 果 还 要 保持 现状 ， 等 着 所 有 浏览 器 都 支持 某 个 特性 才 开 始 应 用 这 个 特性 ， 那 么 你 就 已 经 
落后 了 。 你 将 遗憾 地 错过 所 有 设计 用 于 使 得 编写 JavaSript 更 高 效 健壮 的 创新 。 
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1.3 小结 

在 编写 本 部 分 时 ，ES6 (有 些 人 可 能 想 要 称 其 为 ES2015) 刚刚 出 现 ， 其 中 有 很 多 新 的 技术 
需要 学 习 | 

但 是 更 重要 的 是 ， 你 要 转变 你 的 思路 以 符合 JavaScript 新 的 发 展 方 式 。 不 要 再 像 过 去 很 多 
人 所 做 的 那样 ， 等 待 多 年 直到 某 个 正式 文档 投票 通过 (〈 才 开始 应 用 这 个 新 特性 ) 。 

现在 ，JavaScript 的 新 特性 一 旦 可 行 就 会 进入 浏览 器 ， 因 此 是 早早 步 入 正轨 还 是 多 年 以 后 
再 来 追赶 由 你 自己 决定 。 

不 管 未 来 的 JavaScript 采用 何 种 版 本 标识 ， 它 的 发 展 都 会 比 过 去 要 快 得 多 。transpiler 和 
shim/polyfill 都 是 重要 的 工具 ， 它 们 能 帮助 你 保持 处 于 这 个 语言 发 展 的 最 前 沿 。 

如 果 说 JavaScript 发 展 的 新 图 景 中 有 任何 要 点 需要 了 解 的 话 ， 就 是 现在 所 有 的 JavaScript 开 
发 者 都 被 强烈 要 求 从 追踪 发 展 的 状态 转换 为 直接 站 在 最 前 沿 。 那 么 ， 学 习 ES6 就 是 开始 的 
第 一 步 ! 
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第 2 章 
语法 





有 一 点 比较 奇怪 的 是 ， 不 管 你 编写 JavaScript 代码 的 时 间 有 多 长 ， 都 会 觉得 语法 对 你 来 说 
非常 熟悉 。 虽 然 确实 有 一 些 怪异 的 地 方 ， 但 总 的 来 说 ，JavaScript 语法 非常 合理 自然 ， 它 
借鉴 于 其 他 一 些 语言 ， 和 它们 有 很 多 相似 之 处 。 



































然而 ，ES6 新 增 了 很 多 新 的 语法 形式 ， 需 要 我 们 去 熟悉 。 本 章 我 们 将 会 介绍 这 些 新 的 语法 
形式 ， 看 看 它们 提供 了 哪些 新 东西 。 


在 编写 本 部 分 时 ， 书 里 讨论 的 特性 中 有 一 些 已 经 被 各 种 浏览 器 (Firefox、 
Chrome 等 ) 所 支持 ， 但 还 有 一 些 只 是 部 分 实现 ， 其 他 其 至 完全 没有 实 
现 。 直 接 试验 这 些 示 例 可 能 会 出 现 各 种 结果 。 如 果 是 这 样 的 话 ， 可 以 通过 
transpiler 来 试验 ， 因 为 这 些 特 性 中 的 绝 大 多 数 都 已 经 被 此 类 工具 所 支持 。 
ES6Fiddle (http://www.es6fiddle.net/) 是 一 个 非常 不 错 的 、 易 于 使 用 的 ES6 试 
验 田 ，Babel transpiler (http://babeljs.io/repl/) 的 在 线 REPL 也 是 这 样 。 

















2.1 块 作用 域 声明 

你 很 可 能 已 经 了 解 ，JavaScript 中 变量 作用 域 的 基本 单元 一 直 是 function。 如 果 需 要 创 
建 一 个 块 作用 域 ， 最 普遍 的 方法 除了 普通 的 函数 声明 之 外 ， 就 是 立即 调用 函数 表达 式 
(IIFE)。 举 例 来 说 : 





var a = 2; 


(function IIFE(){ 
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var a = 3; 
console.log( a ); //3 
])(); 


console.log( a ); // 2 


2.1.1 let 声明 


但 现在 ， 我 们 可 以 创建 绑 定 到 任意 块 的 声明 ，( 不 出 意外 地 ) 其 被 称 为 块 作用 域 (block 
scoping)。 这 意味 着 我 们 只 需要 一 对 { .. } 就 可 以 创建 一 个 作用 域 。 不 像 使 用 var 那样 声 
明 的 变量 总 是 归属 于 包含 函数 〈 即 全 局 ， 如 果 在 最 顶层 的 话 ) 作用 域 ， 而 是 像 下 面 这 样 使 
用 let: 


























var a = 2; 
{ 
let a = 3; 
console.log( a ); // 3 
} 
console.log( a ); Jlrs2 

















在 JavaScript 中 使 用 独立 的 { .. } 还 不 是 很 常见 的 惯用 法 ,但 总 是 合法 的 。 如 果 开 发 者 有 
其 他 支持 块 作用 域 语言 的 经 验 ， 会 很 容易 认 出 这 种 模式 .。 

我 认为 这 种 使 用 一 个 专门 的 { .. } 块 的 模式 是 创建 块 作用 域 变 量 的 最 好 方法 。 另 外 ， 应 该 
总 是 把 let 声明 放 在 块 的 最 前 面 。 如 果 有 多 个 变量 需要 声明 的 话 ， 建 议 只 用 一 个 Let。 

从 编码 风格 上 来 说 ， 我 甚至 愿意 把 Let 和 左 括号 { 放 在 同一 行 ， 这样 更 明确 地 表明 了 这 个 
块 的 目的 只 是 为 了 声明 这 些 变量 的 作用 域 。 









































全， let:a\s:2,0bs es 
//.. 
} 


这 样 看 起 来 很 奇怪 ， 也 不 大 可 能 符合 其 他 大 多 数 ES6 文献 中 推荐 的 语法 形式 。 但 是 我 的 疯 
狂 是 有 原因 的 。 


Let 声明 还 有 一 个 试验 性 (未 标准 化 的 ) 的 形式 ， 称 为 et 块 ， 看 起 来 就 像 这 样 : 








Let (Ca 二 22 Pb, :6) 
A 
} 


我 把 这 种 形式 称 为 显 式 块 作用 域 ， 而 镜像 于 var 的 那 种 Let .. 声明 形式 更 加 隐 式 ， 因 为 它 
某 种 程度 上 “劫持 ”了 所 在 的 { . } 中 的 一 切 。 一 般 来 说 ， 开 发 者 喜欢 显 式 机 制胜 过 隐 式 
机 制 ， 我 认为 这 里 也 是 这 样 。 
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比较 前 面 的 两 个 代码 片段 ， 它 们 是 非常 相似 的 ， 我 认为 这 两 种 机 制 风 格 上 都 称 得 上 是 显 式 
块 作 用 域 。 不 季 的 是 ， 甚 中 最 显 式 的 let (..) { .. } 形式 并 没有 被 ES6 采用 。ES6 之 后 
可 能 会 再 次 考虑 这 个 选择 , 但 是 现在 来 说 ， 我 认为 前 者 是 最 好 的 选择 。 


为 了 强调 说 明 let . 声明 的 隐 式 本 质 ， 考 虑 下 面 这 种 用 法 : 














let a = 2; 


let b=a* 3; 
console.1log( b ); // 6 


for (let i = a; i <= b; i+t+) { 
let j = i + 10; 
ConsoLe.Log( j ); 


// 12 13 14 15 16 


let c=a+b; 
console.log( c ); // 8 
} 


不 要 回头 去 看 前 面 的 代码 ， 快 速 回答 : 哪个 ( 些 ) 变量 只 存在 于 if 语句 内 部 ， 哪 个 ( 些 ) 
变量 只 存在 于 for 循环 内 部 ? 


答案 : if 语句 包含 了 块 作用 域 变 量 b 和 <c， 块 作用 域 变量 i 和 j 存在 于 for 循环 之 中 。 


你 是 否 需要 思考 一 会 呢 ? 1 并 不 在 包含 它 的 if 语句 作用 域 中 ， 这 一 点 是 否 让 你 吃惊 呢 ? 
这 种 疑惑 和 思考 ， 我 称 之 为 “脑力 税 ”"， 来 自 于 tet 机制 对 于 我 们 来 说 不 只 是 新 的 ， 同 时 
也 是 隐 式 的 这 个 事实 。 


作用 域内 部 后 面 才 出 现 的 let < = .. 声明 也 有 隐患 。 和 传统 的 var 声明 变量 不 同 ， 不 管 出 
现在 什么 位 置 ，var 都 是 归属 于 包含 它 的 整个 函数 作用 域 。let 声明 归属 于 块 作用 域 ， 但 是 
直到 在 块 中 出 现 才 会 被 初始 化 。 


在 Let 声明 / 初始 化 之 前 访问 let 声明 的 变量 会 导致 错误 ， 而 使 用 var 的 话 这 个 顺序 是 无 
关 紧 要 的 (除了 代码 风格 方面 )。 

































































考虑 : 
{ 
console.log( a ); // undefined 
console.log( b ); // ReferenceError! 
var a; 
let b; 
} 
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过 早 访问 Let 声明 的 引用 导致 的 这 个 ReferenceError 严格 说 叫 作 临时 死亡 
区 (Temporal Dead Zone，TDZ) 错误 你 在 访问 一 个 已 经 声明 但 没有 
初始 化 的 变量 。 以 后 我 们 还 会 遇 到 TDZ 错误 一 一 ES6 中 它 出 现 了 多 次 。 另 
外 ， 注意“ 初始 化 ”并 不 要 求 代 码 中 的 显 式 赋值 ， 比 如 Let b; 这 样 完 全 是 
有 效 的 。 声 明 时 没有 赋值 的 变量 会 自动 赋值 为 undefined， 所 以 Let b; 就 
等 价 于 let b = undefined; 。 不 管 是 否 显 式 赋 值 ， 都 不 能 在 let b 语句 运行 
之 前 访问 b。 

















最 后 一 点 : 对 于 TDZ 值 和 未 声明 值 (以 及 声明 过 的 ! )，typeof 结果 是 不 同 的 。 举 例 来 说 : 


{ 
// a 未 声明 
if (typeof a === "undefined") { 
console.log( "cool" ); 
} 
// b 声 明了 ， 但 还 处 于 TDZ 
if (typeof b === "undefined") { // ReferenceError! 
/I/.. 
} 
J 党 
let b; 
} 


这 里 a 是 未 声明 的 ， 所 以 typeof 是 检查 它 是 否 存在 的 唯一 安全 的 方法 。 而 typeof b 会 抛 
出 TDZ 错误 ， 因 为 代码 中 在 后 面 恰好 有 一 个 let b 声明 。 


现在 能 更 清楚 为 什么 我 坚持 认为 应 该 把 所 有 的 let 声明 放 在 其 所 在 作用 域 的 最 前 面 了 吧 。 
这 样 就 完全 避免 了 不 小 心 过 早 访问 的 问题 。 这 也 使 得 阅读 这 个 块 ， 以 及 所 有 块 代码 开头 的 
时 候 能 够 更 清楚 地 了 解 这 块 代码 包含 了 哪些 变量 。 

你 的 代码 块 (if 语句 、while 循环 等 ) 不 需要 与 块 行为 方式 共享 原来 的 行为 方式 。 

完全 由 你 来 选择 是 否 遵守 这 个 规则 来 提高 你 的 代码 的 明晰 性 ， 而 这 一 点 将 会 节省 你 大 量 的 
重 构 精力 ， 避 免 自作 自 受 。 


























关于 let 和 块 作用 域 的 更 多 信息 ， 参 见 本 系列 《你 不 知道 的 JavaScript (上 
卷 )》 第 一 部 分 的 第 3 章 





let +for 
我 建议 使 用 let 声明 块 的 显 式 形式 ， 唯 一 的 例外 是 Let 出 现在 for 循环 头 部 的 情况 。 原 
可 能 有 点 微妙 ， 但 是 我 认为 这 是 ES6 的 重要 特性 之 一 。 


|| 
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考虑 : 


var funcs = []; 


for (let i = 0; i < 5; i+t+) { 
funcs.push( function(){ 
console.log( i ); 
}); 
} 


funcs[3](); /人 3 
for 循环 头 部 的 Let i 不 只 为 for 循环 本 身 声明 了 一 个 i， 而 是 为 循环 的 每 一 次 迭代 都 重新 


声明 了 一 个 新 的 i。 这 意味 着 loop 迭代 内 部 创建 的 闭 包 封 闭 的 是 每 次 迭代 中 的 变量 ， 就 像 
期 望 的 那样 。 




















如 果 试 验 同 样 的 代码 ， 只 把 var i 放 在 for 循环 头 部 ， 得 到 的 结果 就 会 是 5 而 不 是 3， 因 
为 在 外 层 作用 域 中 只 有 一 个 让， 这 个 谋 被 封闭 进去 ， 而 不 是 每 个 迭代 的 函数 会 封闭 一 个 
新 的 i。 





还 可 以 通过 下 面 更 详细 一 点 的 代码 完成 同样 的 事情 : 
var funcs = []; 
for (var i = 0; i < 5; i++) { 
let j = i; 
funcs.push( function(){ 
console.log( j ); 


} ); 
} 


funcs[3](); // 3 
这 里 我 们 强制 在 每 个 欠 代 内 部 创建 了 一 个 新 的 j， 然 后 闭 包 的 工作 方式 是 一 样 的 。 我 更 喜 
欢 前 面 一 种 形式 ， 这 个 特殊 的 额外 功能 是 我 为 什么 支持 for (Let .. ) .. 形式 的 原因 。 可 
能 有 人 认为 这 种 形式 太 隐 式 ( 隐 上 星 )， 但 我 认为 这 已 经 足够 明晰 ， 也 足够 有 用 了 。 











let 放 在 for .. in 和 for .. of 循环 中 也 是 一 样 的 (参见 2.9 节 )。 


2.1.2 const 声明 
还 有 一 个 块 作用 域 声 明 形 式 需 要 了 解 : const， 用 于 创建 常量 。 

















{ 
const a = 2; 
console.1log( a ); // 2 
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a= 3; // TypeError! 








这 个 变量 的 值 在 声明 时 设 定之 后 就 不 允许 改变 。const 声明 必须 要 有 显 式 的 初始 化 。 如 果 
需要 一 个 值 为 undefined 的 常量 ， 就 要 声明 const a = undefined。 


常量 不 是 对 这 个 值 本 身 的 限制 ， 而 是 对 赋值 的 那个 变量 的 限制 。 换 名 话说 ， 这 个 值 并 没有 
因为 const 被 锁定 或 者 不 可 变 ， 只 是 赋值 本 身 不 可 变 。 如 果 这 个 值 是 复杂 值 ， 比 如 对 象 或 
者 数组 ， 其 内 容 仍然 是 可 以 修改 的 。 


{ 
const a = [1,2,3]; 
a.push( 4 ); 
console.log( a ); J/ [L2354] 
a = 42; // TypeError! 
} 


变量 a 并 不 持 有 一 个 常量 数组 ， 相反 地 ， 它 持 有 一 个 指向 数组 的 常量 引用 。 数 组 本 身 是 可 
以 随意 改变 的 。 


将 一 个 对 象 或 数组 作为 常量 赋值 ， 意 味 着 这 个 值 在 这 个 常量 的 词法 作用 域 结 
束 之 前 不 会 被 垃圾 回收 ， 因 为 指向 这 个 值 的 引用 没有 清除 。 这 可 能 是 你 想 要 
的 ， 但 是 如 果 不 想 出 现 这 样 的 情形 的 话 则 需要 小 心 。 





五 





























本 质 上 说 ，const 声明 强化 了 多 年 以 来 我 们 通过 代码 风格 表达 的 信号 ， 其 中 我 们 把 变量 名 
声明 为 全 大 写字 母 ， 并 将 其 赋值 为 某 个 字面 值 ， 小 心 谨慎 地 不 去 改变 这 个 值 。var 赋值 没 
有 什么 强制 措施 ， 但 现在 有 了 const 赋值 ， 可 以 帮助 我 们 发 现 不 想 出 现 的 改变 。 




















const 可 以 用 在 for、for..in 以 及 for..of 循环 的 变量 声明 中 (参见 2.9 节 )。 但 如 果 想 要 
重新 赋值 就 会 扫 出 错误 ， 比 如 for 循环 中 常用 的 i++。 


是 否 使 用 const 
有 一 些 传言 认为 ，JavaScript 引擎 在 某 些 情况 下 可 以 对 const 进行 比 let 和 var 更 激进 的 优 
化 。 理 论 上 说 ， 引 擎 更 容易 了 解 这 个 变量 的 值 /类 型 永远 不 会 改变 ， 那 么 它 就 可 以 取消 某 
些 可 能 的 追踪 。 





不 管 这 里 const 是 否 真 的 有 好 处 ， 还 是 这 只 是 我 们 自己 的 幻想 和 期 望 ， 更 重要 的 决定 因素 
为 是 否 需要 常量 性 。 记 住 : 源码 的 一 个 重要 功能 是 通过 清晰 的 交流 表明 你 的 意图 ， 不 只 是 
对 你 自己 ， 也 是 对 未 来 的 你 和 其 他 合作 者 。 




















有 些 开发 者 倾向 于 一 开始 就 把 所 有 变量 都 声明 为 const， 然 后 如 果 必 须 在 代码 中 修改 它 就 
改 为 let。 这 个 思路 很 有 趣 ， 但 是 并 不 确定 它 是 否 真正 提高 代码 的 可 读 性 和 可 理解 性 。 
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这 并 不 像 许 多 人 相信 的 那样 是 真正 的 保护 ， 因 为 任何 后 续 的 开发 者 想 要 修改 一 个 const 值 
只 需要 盲目 地 把 const 声明 改 成 let 即 可 。 最 好 的 情况 下 ， 它 避免 了 意外 的 修改 。 但 是 再 
次 说 明 ， 除 了 我 们 的 直觉 和 感觉 ， 这 里 没有 客观 且 清 晰 地 说 明 “ 意 外 ”是 什么 或 者 要 防止 


什么 








。 类 似 的 思路 也 存在 于 类 型 强制 转换 的 情况 。 


我 的 建议 是 : 要 避免 可 能 令 人 迷惑 的 代码 ， 只 对 你 有 意 表明 不 会 改变 的 变量 使 用 const。 
换 名 话说， 不 要 依赖 于 const 来 规范 代码 行为 ， 而 是 在 意图 清晰 的 时 候 ， 把 它 作为 一 个 表 


明 意 


2:1 





图 的 工具 。 
.3 块 作用 域 函数 


从 ES6 开始 ， 块 内 声明 的 函数 ， 其 作用 域 在 这 个 块 内 。 在 ES6 之 前 ， 规 范 并 没有 要 求 这 一 
点 ， 但 是 许多 实现 就 是 这 么 做 的 。 所 以 现在 是 规范 与 现实 保持 一 致 了 。 


考虑 : 











{ 
foo(); // 可 以 这 么 做 ! 
function foo() { 
//.. 
} 
} 
foo(); // ReferenceError 


foo() 函数 声明 在 { .. } 块 内 部 ，ES6 支持 块 作用 域 。 所 以 在 块 外 不 可 用 。 但 是 还 要 注意 


到 它 





是 在 块 内 “提升 ”了 ， 与 let 声明 相反 ， 后 者 会 遇 到 前 面 介 绍 的 TDZ 错误 陷阱 。 


如 果 编 写 了 和 前 面 类 似 的 代码 ， 并 依赖 于 旧 有 的 非 块 作用 域 行为 ， 那 么 函数 声明 的 块 作用 
域 就 可 能 会 引发 问题 。 


在 前 





if (something) { 
function foo() { 
console.log( "1" ); 


} 
} 
else { 
function foo() { 
console.log( "2" ); 
} 
} 


foo(); // 7? 


ES6 环境 中 ， 不 管 something 的 值 是 什么 ，foo() 都 会 打印 出 "2"， 因 为 两 个 函数 声明 
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都 被 提升 到 了 块 外 ， 第 二 个 总 是 会 胜出 。 


而 在 ES6 中 ， 最 后 一 行 会 抛 出 一 个 ReferenceError。 


2.2 Spread/rest 


ES6 引入 了 一 个 新 的 运算 符 ...， 通常 称 为 spread 或 rest (展开 或 收集 ) 运算 符 ， 取 决 于 
它 在 哪 /如 何 使 用 。 我 们 来 看 一 下 : 





function foo(x,y,z) { 
console.log( x, y, z ); 


} 


foot ss [11.23] 3 站 次 河 





.. 用 在 数组 之 前 时 (实际 上 是 任何 iterable， 我 们 将 在 第 3 章 中 介绍 )， 它 会 把 这 个 变 
“展开 ”为 各 个 独立 的 值 。 
我 们 通常 看 到 的 是 前 面 代码 片段 中 的 使 用 方式 ， 即 把 一 个 数组 展开 为 一 组 国 数 调用 的 参 
数 。 在 这 种 用 法 中 ，.… 为 我 们 提供 了 可 以 替代 appLy(.……) 方法 的 一 个 简单 的 语法 形式 ， 
在 前 ES6 中 我 们 常常 这 样 写 : 








相 m | 上 kK 




















foo.appLy( null, [1,2,3] ); /il 3 
然而 ，.… 也 可 以 在 其 他 上 下 文中 用 来 展开 /扩展 一 个 值 ， 比 如 在 另 一 个 数组 声明 中 : 


var a = [2,3,4]; 
Var’ bs 1 33 5. 


console.log( b ); // [1,2,3,4,5] 





在 这 种 用 法 中 ，... 基本 上 代替 了 concat(..)， 这 里 的 行为 就 像 是 [1].concat( a, [5] )。 
.的 另外 一 种 常见 用 法 基本 上 可 以 被 看 作 反 向 的 行为 ， 与 把 一 个 值 展 开 不 同 ，.… 把 一 系 








列 值 收集 到 一 起 成 为 一 个 数组 。 考 虑 : 
function foo(x, y, ...z2) { 
console.log( x, y, z ); 
} 
foo( 1, 2, 3, 4, 5 ); Jy 1 2. 3;433] 





在 这 段 代 码 中 ，...z 基本 上 是 在 说 :“ 把 剩 下 的 参数 (如 果 有 的 话 ) 收集 到 一 起 组 成 一 
个 名 为 z 的 数组 。” 因 为 x 赋值 为 1，y 赋值 为 2， 所 以 其 余 的 参数 3、4 和 5 被 收集 到 数 
组 z 中。 


当然 ， 如 果 没 有 命名 参数 的 话 ，.… 就 会 收集 所 有 的 参数 : 
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function foo(...args) { 
console.log( args ); 


} 


foo( 1, 2, 3, 4, 5); // [1,2,3,4,5] 





foo(..) 国 数 声明 中 的 ...args 通常 称 为 “rest 参数 "， 因 为 这 里 是 在 收集 其 
余 的 参数 。 我 喜欢 用 “收集 ”这 个 词 ， 因 为 这 更 好 地 描述 了 它 的 行为 而 不 是 
它 的 内 容 。 

















这 种 用 法 最 好 的 一 点 是 ， 它 为 弃 用 很 久 的 arguments 数组 一 一 实际 上 它 并 不 是 真正 的 数 
组 ， 而 是 类 似 数组 的 对 象 一 一 提供 了 一 个 非常 可 靠 的 替代 形式 。 因 为 args (或 者 随便 你 
给 它 起 什么 名 字 一 一 很 多 人 喜欢 用 r 或 rest) 是 一 个 真正 的 数组 ， 前 ES6 中 有 很 多 技巧 
用 来 把 arguments 转变 为 某 种 我 们 可 以 当 作 数 组 来 使 用 的 东西 ， 现 在 我 们 可 以 摆脱 这 些 思 
蠢 的 技巧 了 。 
考虑 : 

// 按照 新 的 ES6 的 行为 方式 实现 

function foo(...args) { 


// args 已 经 是 一 个 真正 的 数组 


// 丢弃 args 中 第 一 个 元 素 
args.shift(); 














// 把 整个 args 作 为 参数 传 给 console. log(..) 
console.log( ...args ); 


} 


// 按照 前 ES6 的 老 派 行为 方式 实现 
function bar() { 
// 把 arguments 转 换 为 一 个 真正 的 数组 


var args = Array.prototype.slice.call( arguments ); 


// 在 尾 端 添加 几 个 元 素 
args.push( 4, 5 ); 


// 过 滤 掉 奇数 
args = args.filter( function(v){ 
return v % 2 == 0; 


}); 
// 把 整个 args 作 为 参数 传 给 foo(..) 
foo.apply( null, args ); 

} 


bar( 0, 1, 2, 3 ); //24 


函数 foo(..) 声明 中 的 ...args 收集 参数 ，console.log(..) 调用 中 的 ...args 将 其 展开 。 
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这 里 很 好 地 展示 了 运算 符 .… 对 称 而 又 相反 的 用 法 。 
除了 在 函数 声明 中 使 用 ...， 还 有 一 种 情况 是 .… 被 用 于 收集 值 ， 我 们 将 在 2.5 节 中 介绍 。 


2.3 默认 参数 值 
可 能 JavaScript 最 常见 的 一 个 技巧 就 是 关于 设 定 函数 参数 默认 值 的 。 多 年 以 来 我 们 实现 这 
一 点 的 方式 是 这 样 的 ， 看 起 来 应 该 很 熟悉 : 


function foo(x,y) { 


x=x || 11; 
y=y || 31; 
console.log( x + y ); 
} 
foo(); // 42 
foo( 5, 6 ); Ai 
foo( 5 ); // 36 


foo( null, 6 ); // 17 


当然 ， 如 果 你 之 前 使 用 过 这 个 模式 ， 就 会 知道 它 很 有 用 ， 但 同时 又 有 点 危险 ， 比 如 ， 如 果 


对 于 一 个 参数 你 需要 能 够 传人 被 认为 是 falsy ( 假 ) 的 值 。 考 虑 : 





foo( 0, 42 ); // 53 <-- 哎 呀 ， 并 非 42 


为 什么 ? 因为 这 里 9 为 假 ， 所 以 x 1| 11 结果 为 11， 而 不 是 直接 传人 的 8。 




















要 修正 这 个 问题 ， 有 些 人 会 选择 增加 更 多 的 检查 ， 就 像 下 面 这 样 : 


function foo(x,y) { 
x = (x !== undefined) ? x : 11; 
y = (y !== undefined) ? y : 31; 


console.log( x + y ); 


} 


foo( 0, 42 ); // 42 
foo( undefined, 6 ); // 17 


当然 ， 这 意味 着 除了 undefined 之 外 的 任何 值 都 可 以 直接 传 和 人。 然而 ，undefined 会 表达 
“我 没有 传 入 信息 ”这 样 的 信息 。 除 非 你 确实 需要 能 够 传人 undefined， 它 就 工作 的 很 好 。 











这 种 情况 下 ， 可 以 通过 它 并 不 存在 于 数组 arguments 之 中 来 确定 这 个 参数 是 被 省 略 的 ， 可 
能 就 像 下 面 这 样 : 
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function foo(x,y) { 
x = (0 in arguments) ? x : 11; 
y = (1 in arguments) ? y : 31; 


console.log( x + y ); 


} 


foo( 5 ); // 36 
foo( 5, undefined ); // NaN 


但 是 如 果 你 不 能 传递 任何 值 (甚至 undefined 也 不 行 ) 来 表明 “我 省 略 了 这 个 参数 "， 那 么 
如 何 省 略 第 一 个 参数 x 呢 ? 


foo(,5) 很 吸引 人 ， 但 这 是 不 合法 的 语法 。foo.apply(null，[,5]) 看 来 可 以 实现 这 个 技巧 ， 
但 是 这 里 apply(..) 的 诡异 实现 意味 着 这 些 参 数 被 当 作 了 [undefined,5]， 这 当然 不 是 一 个 
省 略 。 





如 有 果 继 续 深 入 的 话 ， 就 会 发 现 你 只 能 通过 传人 比 “期 望 ”更 少 的 参数 来 省 略 最 后 的 铬 干 
数 〈 例 如 ， 右 侧 的 )， 而 无 法 省 略 位 于 参数 列表 中 间或 者 起 始 处 的 参数 。 


ty 





这 里 应 用 了 一 个 很 重要 的 需要 记 住 的 JavaScrpt 设计 原则 : undefined 意味 着 缺失 。 也 就 是 
说 ，undefined 和 缺失 是 无 法 区 别 的 ， 至 少 对 于 函数 参数 来 说 是 如 此 。 





在 JavaScript 的 其 他 一 些 地 方 上 面 提 到 的 设计 原则 是 不 成 立 的 ， 这 时 候 会 引 
起 混淆 ， 比 如 对 于 有 空 槽 的 数组 。 参 见 本 系列 《你 不 知道 的 JavaScript (中 
卷 )》 第 一 部 分 可 以 获取 更 多 信息 。 





了 解 了 所 有 这 些 之 后 ， 现 在 我 们 可 以 讨论 ES6 新 增 的 一 个 有 用 的 语法 来 改进 为 缺失 参数 赋 
默认 值 的 流程 。 


function foo(x = 11, y = 31) { 
console.log( x + y ); 


} 

foo(); // 42 

foo( 5, 6 ); A 1 

foo( 0, 42 ); // 42 

foo( 5 ); // 36 

foo( 5, undefined ); // 36 <-- 于 了 undefined 
foo( 5, null ); // 5 <-- null 被 强制 转换 为 0 


foo( undefined, 6 ); // 17 <-- 于 了 undefined 
foo( null, 6 ); // 6 <-- null 被 强制 转换 为 0 





注意 这 些 结果 ， 以 及 它们 和 前 面 的 方法 之 间 的 微妙 区 别 和 相似 之 处 。 
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在 函数 声明 中 的 x = 11 更 像 是 x !== undefined ? x : 11 而 不 是 常见 技巧 x 上 || 11， 所 以 
在 把 前 ES6 代码 转换 为 ES6 默认 参数 值 语法 的 时 候 要 格外 小 心 。 

















rest/gather 参数 (参见 22 节 ) 不 能 有 上 默认 值 。 所 以 ， 尽 管 function 
foo(...vals=[1,2,3]) { 这 样 的 用 法 可 能 看 起 来 很 诱 人， 但 是 它 并 非 合法 的 
语法 。 如 果 需 要 的 话 还 是 得 继续 手动 提供 这 种 逻辑 。 











默认 值 表达 式 
函数 默认 值 可 以 不 只 是 像 31 这 样 的 简单 值 ， 它 们 可 以 是 任意 合法 表达 式 ， 甚 至 是 函数 
调用 。 








function bar(val) { 
console.log( "bar called!" ); 
return y + val; 


} 


function foo(x = y+3,z= bar(x)){ 
console.log( x, z ); 


} 

var y = 5; 

foo(); // "bar called" 
// 8 13 

foo( 10 ); // "bar called" 
// 10 15 

y = 6; 

foo( undefined, 10 ); // 9 10 





可 以 看 到 ， 默 认 值 表达 式 是 惰性 求 值 的 ， 这 意味 着 它们 只 在 需要 的 时 候 运 行 一 也 就 是 
说 ， 是 在 参数 的 值 省 略 或 者 为 undefined 的 时 候 。 


这 里 有 一 个 微妙 的 细节 ， 注 意 函 数 声明 中 形式 参数 是 在 它们 自己 的 作用 域 中 〈 可 以 把 它 看 
作 是 就 在 函数 声明 包 吉 的 ( .. ) 的 作用 域 中 ) ， 而 不 是 在 函数 体 作 用 域 中 。 这 意味 着 在 默 
认 值 表达 式 中 的 标识 符 引 用 首先 匹配 到 形式 参数 作用 域 ， 然 后 才 会 搜索 外 层 作 用 域 。 参 见 
本 系列 《你 不 知道 的 JavaScript (上 卷 )》 第 一 部 分 可 以 获取 更 多 信息 。 











考虑 : 


var W= 1, ZZ= 2; 


function foo( x=w+1i,y=x+1,z=z+1)t 
console.log( x, y, z ); 


} 


foo(); // ReferenceError 
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w + 工 默认 值 表达 式 中 的 w 在 形式 参数 列表 作用 域 中 寻找 w， 但 是 没有 找到 ， 所 以 就 使 用 外 
层 作 用 域 的 w。 接 下 来 ，x + 1 上 默认 值 表 达 式 中 的 x 找到 了 形式 参数 作用 域 中 的 x， 很 幸运 
这 里 x 已 经 初始 化 了 ， 所 以 对 y 的 赋值 可 以 正常 工作 。 








但 是 ，z + 1 中 的 z 发现 z 是 一 个 此 刻 还 没 初 始 化 的 参数 变量 ， 所 以 它 永 远 不 会 试图 从 外 
层 作用 域 寻 找 z。 








正如 我 们 在 2.1.1 节 中 提 到 的 ，ES6 引入 了 TDZ， 它 防止 变量 在 未 初始 化 的 状态 下 被 访问 。 
因此 ，z + 1 默认 值 表达 式 会 抛 出 一 个 TDZReferenceError 错误 。 


默认 值 表达 式 其 至 可 以 是 inline 函数 表达 式 调用 一 一 一 般 称 为 立即 调用 函数 表达 式 
(IIFE)， 但 这 对 于 代码 明晰 性 没什么 好 处 。 


function foo( x = 
(function(v){ return v + 11; })( 31 ) 
于 


console.log( x ); 
} 


foo(); // 42 


IIFE (或 者 其 他 任何 执行 inline 函数 表达 式 ) 适用 于 默认 值 表达 式 的 情况 是 很 少见 的 。 如 
果 你 发 现 自己 需要 这 么 做 ， 那 么 一 定 要 后 退 一 步 重 新 思考 一 下 | 





如 果 这 个 IIFE 试图 访问 标识 符 x， 并 且 没 有 声明 自己 的 x 的 话 ， 也 会 引发 
TDZ 错误 ， 就 像 前 面 讨论 的 一 样 。 








前 面 代 码 中 的 默认 值 表 达 式 是 一 个 IFE， 因 为 这 是 一 个 通过 (31) 立即 在 线 执行 的 国 数 。 
如 果 没 有 这 一 部 分 ， 那 么 赋 给 x 的 默认 值 就 会 是 一 个 国 数 引 用 本 身 ， 可 能 就 像 默认 回调 那 
样 。 这 个 模式 在 某 些 情况 下 可 能 是 很 有 用 的 ， 比 如 : 





function ajax(url, cb = function(){}) { 
) 和 
ajax( "http://some.url.1" ); 
在 这 个 例子 中 ， 我 们 需要 在 没有 指定 其 他 函数 情况 下 的 默认 cb 是 一 个 没有 操作 的 空 函 数 


调用 。 这 个 函数 表达 式 就 是 一 个 函数 引用 ， 而 不 是 函数 调用 本 身 (后 面 没有 调用 形式 ())， 
这 实现 了 我 们 的 目标 。 





从 JavaScript 的 早期 开始 ， 就 有 一 个 不 为 人 知 但 是 很 有 用 的 技巧 可 以 使 用 : Function. 
prototype 本 身 就 是 一 个 没有 操作 的 空 函 数 。 所 以 ， 这 个 声明 可 以 是 cb = Function. 
prototype， 这 样 就 省 去 了 在 线 函 数 表 达 式 的 创建 过 程 。 
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2.4 解构 


ES6 引入 了 一 个 新 的 语法 特性 ， 名 为 解构 (destructuring)， 把 这 个 功能 看 作 是 一 个 结构 化 
赋值 (structured assignment) 方法 ， 可 能 会 容易 理解 一 些 。 考 虑 : 


function foo() { 
return [1,2,3]; 
} 


var tmp = foo()， 
a = tmp[0], b = tmp[1], ¢ = tmp[2]; 


console.log( a, b, c ); A 2 3 





可 以 看 到 ， 我 们 构造 了 一 个 手动 赋值 ， 把 foo() 返回 数组 中 的 值 赋 给 独立 变量 a、b 和 <， 
为 了 实现 这 一 点 ， 我 们 (不幸 地 ) 需要 一 个 临时 变量 tmp。 














类 似 地 ， 对 于 对 象 可 以 像 下 面 这 么 做 : 


function bar() { 
return { 
x: 4， 
y: 5， 
Zz 6 
}; 
} 


var tmp = bar()， 
x = tmp.x, y = tmp.y, z = tmp.z; 


console.log( x, y, z ); //456 
tmp.x 属性 值 赋 给 了 变量 x， 同样 地 ，tmp.y 赋 给 了 y，tmp.z 赋 给 了 z。 


可 以 把 将 数组 或 者 对 象 属性 中 带 索 引 的 值 手动 赋值 看 作 结 构 化 赋值 。ES6 为 解构 新 增 了 一 
个 专门 语法 ， 专 用 于 数组 解构 和 对 象 解构 。 这 个 语法 消除 了 前 面 代码 中 对 临时 变量 tmp 的 
需求 ， 使 代码 简洁 很 多 。 考 虑 : 
































var [ a, b, ¢ ] = foo(); 
var { x: x, y: y, z: z } = bar(); 


console.log( a, b, c ); 
console.log( x, y, z ); 








你 可 能 更 习惯 [a,b,c] 这 样 的 语法 作为 要 赋 的 值 出 现在 赋值 操作 符 = 的 右 侧 。 























解构 语法 对 称 地 翻转 了 这 个 模式 ， 于 是 赋值 符 = 左 侧 的 [a,b,c] 被 当 作 某 种 “模式 ”， 用 来 
把 右 侧 数组 值 解构 赋值 到 独立 的 变量 
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类 似 地 ，{ x: x，y: y，z: z 了 指定 了 一 个 把 bar() 的 对 象 值 分 解 为 独立 的 变量 赋值 的 
“模式 ”。 


2.4.1 对象 属性 赋值 模式 
让 我 们 继续 深入 探讨 一 下 前 面 代码 中 的 语法 { x: x，..}。 实 际 上 ， 如 果 属 性 名 和 要 赋值 
的 变量 名 相同 ， 这 种 语法 还 可 以 更 简短 一 些 ， 





























var { x, y, z } = bar(); 

console.log( x, y, z ); J/ 4 556 
很 酷 吧 ， 是 不 是 ? 
但 是 { x，.. } 是 省 略 掉 了 x: 部 分 还 是 : x 部 分 呢 ? 实际 上 我 们 使 用 这 个 缩写 语法 的 时 候 是 
略 去 了 x: 部 分 。 看 起 来 这 似乎 是 无 关 紧要 的 细节 ， 但 不 久 以 后 你 就 会 发 现 这 一 点 的 重要 性 。 
如 果 可 以 使 用 这 种 简短 形式 ， 谁 还 会 再 用 那 种 更 宛 长 的 形式 呢 ? 但 是 更 长 的 形式 支持 把 属 
性 赋 给 非 同 名 变量 ， 实 际 上 有 时 候 这 是 非常 有 用 的 : 

var { x: bam, y: baz, z: bap } = bar(); 


console.log( bam, baz, bap ); //456 
console.log( x, y, z ); // ReferenceError 














关于 对 象 解构 形式 的 这 个 变 体 有 一 个 很 微妙 、 但 是 极其 重要 的 细 市 需要 理解 。 为 了 说 明 为 
什么 要 对 这 一 点 格外 小 心 ， 我 们 考虑 一 下 下 面 指定 一 般 对 象 字面 值 的 “模式 ”: 














var X = 10, Y = 20; 
var o= {a: X, b: Y}); 
console.log( 0.a, 0.b ); // 16 20 

在 { a: X，b: Y } 中 ,我们 知道 a 是 对 象 属性 ， 而 x 是 要 赋 给 它 的 值 。 换 句 话 说 ， 这 个 语 


法 模式 是 target: source, 或 者 更 明确 地 说 是 property-alias: vaLue。 因 为 它 和 赋值 符 = 
的 模式 一 样 都 是 target = source， 所 以 我 们 很 直观 地 理解 了 这 一 点 。 


但 是 ， 在 使 用 对 象 解构 赋值 的 时 候 一 一 也 就 是 说 ， 把 看 起 来 像 是 对 象 字面 值 的 语法 { .. } 
放 在 = 运算 符 的 左 侧 一 一 反 转 了 target: source 模式 。 


回忆 一 下 : 














var { x: bam, y: baz, z: bap } = bar(); 


这 里 的 语法 模式 是 souce: target (或 者 说 是 value:variable-alias)。x: ban 表示 x 属性 
是 源 值 ， 而 bam 是 要 赋值 的 目标 变量 。 换 名 话说， 对 象 字 面值 是 target <-- source， 而 对 
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象 解构 赋值 是 source --> target。 看 到 这 里 是 如 何 反 转 了 吧 ? 
还 可 以 这 么 看 待 这 种 语法 形式 ， 可 能 会 帮助 理解 ， 减 少 迷惑 。 考 虑 : 
var aa = 10, bb = 20; 


var 0O= { x: aa, y: bb }; 
var { x: AA, y: BB } = 0; 


console.log( AA, BB ); // 10 20 
在 { x: aa, y: bb } 这 一 行 ，x 和 y 表示 对 象 的 属性 。 在 { x: AA, y: BB } 这 一 行 , x 和 y 
也 代表 对 象 属性 。 
还 记得 前 面 指出 过 { x，.. 】} 是 省 略 了 x: 部 分 吗 ? 在 这 两 行 里 ， 如 果 去 掉 代码 中 的 x: 和 
y: 这 两 部 分 ， 只 剩 下 aa，bb 和 AA，BB， 其 效果 就 是 一 一 只 是 概念 上 ， 而 不 是 实际 上 一 一 
从 aa 赋值 给 AA， 从 bb 赋值 给 BB。 






































所 以 ， 对 称 性 可 能 会 帮助 解释 为 什么 这 个 ES6 特性 的 语法 模式 有 意 进行 了 反 转 。 


我 更 喜欢 解构 赋值 的 语法 是 { AA: x ，BB: y }， 因 为 这 样 两 种 用 法 都 会 保留 
人 们 更 熟悉 的 target: souce 模式 的 一 致 性 。 唉 ， 我 得 训练 自己 的 大 脑 习惯 
这 个 反 转 ， 部 分 读者 肯定 也 是 这 样 。 














2.4.2 不 只 是 声明 
现在 我 们 已 经 在 var 声明 中 应 用 了 解构 赋值 (当然 ， 也 可 以 使 用 Let 和 const), 但 是 解构 
是 一 个 通用 的 赋值 操作 ， 不 只 是 声明 。 


考虑 : 





Var as b, €; Xx, ys; Zs 


[a,b,c] = foo(); 
( {x, y,z}= bar() ); 


console.log( a, b, c ); 2 
console.log( x, y, z ); //456 


这 些 变 量 可 能 是 已 经 声明 的 ， 这 样 的 话 解构 就 只 用 于 赋值 ， 就 像 这 里 我 们 看 到 的 。 


特别 对 于 对 象 解构 形式 来 说 ， 如 果 省 略 了 var/let/const 声明 符 ， 就 必须 把 
整个 赋值 表达 式 用 〈 ) 括 起 来 。 因 为 如 果 不 这 样 做 ,语句 左 侧 的 {..} 作为 语 
名 中 的 第 一 个 元 素 就 会 被 当 作 是 一 个 块 语句 而 不 是 一 个 对 象 。 
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实际 上 ， 赋 值 表达 式 (a、y 等 ) 并 不 必须 是 变量 标识 符 。 任 何 合法 的 赋值 表达 式 都 可 以 。 
举例 来 说 : 

















Var Os 


[0.a, 0.b, o.c] = foo(); 
({ x: oO.x, y: oOo.y, z: 0.z } = bar() ); 


console.log( 0.a, 0.b, o.c ); //123 
console.log( 0.X，o.y，0.Z ); //456 


其 至 可 以 在 解构 中 使 用 计算 出 的 属性 表达 式 。 考 虑 : 





var Which = "x", 


o = {}; 
( { [which]: ofwhich] } = bar() ); 


console.log( o.x ); // 4 


[which]: 这 一 部 分 是 计算 出 的 属性 ， 结 果 是 x 一 一 要 从 涉及 的 对 象 解构 出 来 作为 赋值 源 的 
属性 。o[which] 部 分 就 是 一 个 普通 的 对 象 键 值 引 用 ， 等 价 于 %.x 作为 赋值 的 目标 。 


可 以 用 一 般 的 赋值 来 创建 对 象 映射 /变换 ， 比 如 : 























VEOEE :二 
02 = {}; 


( {a: 02.x, b: o02.y, c: 02.z } = 01 ); 
console.log( 02.x, 02.y, 02.z ); yA 23 
也 可 以 把 一 个 对 象 映 射 为 一 个 数组 ， 比 如 : 


{a be 25 C03 
国电 


Var 01 
a2 


( {a: a2[0], b: a2[1], c: a2[2] } = ol ); 
console.log( a2 ); // [1,2,3] 


或 者 反 过 来 : 


[ 1; 2 3 ] ， 
{}; 


var al = 
02 = 


[ 02.a, 02.b, o2.c ] = al; 


console.log( 02.a, 02.b, o02.c ); {1 1 273 


还 可 以 把 一 个 数组 重 排序 到 另 一 个 : 
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[ 15 25 3 ] ， 
[Lj]; 


var al = 
a2 = 


[ a2[2], a2[0], a2[1] ] = al; 


console.log( a2 ); // [2;53;1] 





其 至 可 以 不 用 临时 变量 解决 “交换 两 个 变量 ”这 个 经 典 问题 : 

var x = 10, y = 20; 

[yx]=[x，y]; 

console.log( x, y ); // 20 10 
注意 : 除非 需要 把 所 有 的 赋值 表达 式 都 当 作 声明 ， 否 则 不 应 该 在 赋值 中 混入 
声明 。 不 然 会 出 现 语 法 错误 。 这 也 是 前 面 我 为 什么 不 得 不 在 [ az2[9]，.. ] = 
.… 解构 赋值 中 把 var a2 = [] 分 离 出 来 。 语 句 var [ a2[0]，.. ] = .是 不 


合法 的 ， 因 为 az[9] 不 是 有 效 的 声明 标识 符 ， 显 然 它 也 不 会 隐 式 地 创建 一 个 
var a2 = [] 声明 。 





2.4.3 重复 赋值 
对 象 解构 形式 允许 多 次 列 出 同一 个 源 属 性 ( 持 有 值 类 型 任意 )。 举 例 来 说 : 





var { a: X, a: Y}= {a:1}); 


这 也 意味 着 可 以 解构 子 对 象 /数组 属性 ， 同 时 捕获 子 对 象 / 类 的 值 本 身 。 考 虑 : 
var { a: { Xx: Xx: Y ja}= {a{x:1}}: 
xX; //1 
Y; //1 
a; // {x:1} 
({fa:xX,a:Y,a:[zZ]}={a:[1]}); 


X.push( 2 ); 
Y[0] = 10; 


xX; // [19,2] 

Y; // [19,2] 

2; /1 
关于 解构 还 有 一 点 需要 注意 : 可 能 你 会 恕 不 住 要 在 同一 行 中 多 
前 为 止 我 们 给 出 的 所 有 示例 一 样 。 但 是 ， 








c= 


出 所 有 的 解构 赋值 ， 就 像 目 
更 好 的 思路 是 把 解构 赋值 模式 分 散在 多 行 中 ， 并 
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使 用 适当 的 缩 进 一 一 就 像 使 用 JSON 或 者 对 象 字面 值 时 一 样 一 一 这 是 为 了 可 读 性 。 














// 令 人 费解 : 
var {a: {b: [c,d],e:{f }},9g}= obj; 


// 更 好 的 版 本 : 


var { 
a: { 
b: [ c,d], 
e: {Ff} 
和 
9 
} = obj; 
记 住 : 解构 的 目的 不 只 是 为 了 打字 更 少 ， 而 是 为 了 可 读 性 更 强 。 
解构 赋值 表达 式 


对 象 或 者 数组 解构 的 赋值 表达 式 的 完成 值 是 所 有 右 侧 对 象 /数组 的 值 。 考 虑 : 


TD 
a, b, c, p; 


p={a,b,c}=0; 


console.log( a, b, c ); //123 
:= 92 // true 





在 前 面 的 代码 中 ，p 赋值 为 对 象 o 的 引用 ， 而 不 是 a、b 或 者 c 的 值 乙 一。 数组 解构 也 是 











这 样 : 


Va 0.=3 [L253] 
a; by Cs p; 


p={a,b,c}=0; 


console.log( a, b, c ); // .2053 
三 == 6; // true 





通过 持 有 对 象 /数组 的 值 作 为 完成 值 ， 可 以 把 解构 赋值 表达 式 组 成 链 : 











人 12 
[4,5,6] ， 


Var 0 = 
p= 


a, by €, Xs 2 


( {a} 
[x,y] 


{b,c} = 0 ); 
[z] = p; 


console.log( a, b, c ); //1 
console.log( x, y, z ); // 4 
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2.5 太 多 ， 太 少 ， 刚 刚好 
对 于 数组 解构 虐 值 和 对 象 解构 喷 值 来 说 ， 你 不 需要 把 存在 的 所 有 值 都 用 来 肤 值 。 举 例 来 说 : 


var [,b] = foo(); 
var { x, z } = bar(); 


console.log( b, x, z ); // 246 





foo() 返回 的 值 1 和 3 被 丢弃 了 ，bar() 返回 的 值 5 也 是 一 样 。 


类 似 地 ， 如 果 为 比 解构 /分解 出 来 的 值 更 多 的 值 赋值 ， 那 么 就 像 期 望 的 一 样 ， 多 余 的 值 会 
被 研 为 undefined 











var [,,c,d] = foo(); 
var {fw, z } = bar(); 


console.log( c, z ); // 36 
console.log( d, w ); // undefined undefined 


这 个 特性 是 符合 前 面 介绍 的 “undefined 就 是 缺失 ”原则 的 。 





本 章 前 面 我 们 介绍 了 .…. 运算 符 ， 了 解 到 有 时 候 它 可 以 用 于 把 数组 中 的 值 散 开 为 独立 的 
值 ， 有 时 候 也 可 以 用 于 做 相反 的 动作 : 把 一 组 值 组 合 到 一 起 成 为 一 个 数组 。 


除了 在 函数 声明 中 的 gather/rest 用 法 ，.…. 也 可 以 执行 解构 赋值 同样 的 动作 。 要 展示 这 一 
点 ， 我 们 先 来 回忆 一 下 本 章 前 面 的 这 一 段 代码 : 








var a= [2,3,4]; 
varb=[ 1，...a， 5 ]; 
console.log( b ); // [1,2,3,4,5] 


这 里 我 们 看 到 ...a 把 a 展开， 因为 它 出 现在 [ .. ] 数组 值 的 位 置 。 如 果 .….a 出 现在 数组 
解构 的 位 置 ， 就 执行 集合 操作 : 











var a = [2,3,4]; 
VSaF [by. svat ] 三 


console.log( b, c ); // 2 [3,4] 


var [ .. ] = a 解构 赋值 展开 a 用 来 给 [ .. ] 中 指定 的 模式 赋值 。 第 一 部 分 名 为 b 得 到 a 
中 的 第 一 个 值 (2)。 然 后 则 是 ...c 收集 了 其 余 的 值 (3 和 4) 赋 给 一 个 名 为 c 的 数组 。 





我 们 已 经 看 到 了 .… 是 如 何 和 数组 一 起 工作 的 ， 但 是 如 果 是 和 对 象 呢 ?这 并 
非 ES6 的 特性 ， 但 可 以 参考 第 8 章 “ES6 之 后 "， 其 中 讨论 了 一 个 可 能 的 新 
特性 ， 即 如 何 通 过 .… 展开 和 集合 对 象 。 
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2.5.1 默认 值 赋 值 
使 用 与 前 面 默 认 函 数 参数 值 类 似 的 = 语法 ， 解 构 的 两 种 形式 都 可 以 提供 一 个 用 来 赋值 
的 默认 值 。 














考虑 : 
var [a=3,b=6,c=9,d=12 ] = foo(); 
Var {Xs 7 E10 ZS 15 Ws 20 = .bare)s 
console.log( a, b, c, d ); //12312 
console.log( x, y, z, Ww ); //456 20 








可 以 组 合 使 用 默认 值 赋值 和 前 面 介绍 的 赋值 表达 式 语 法 。 举 例 来 说 : 























var { x, y, z, w: WW = 20 } = bar(); 


console.log( x, y, z, WW ); //456 20 














如 果 在 解构 中 使 用 一 个 对 象 或 者 数组 作为 默认 值 的 话 ， 注 意 不 要 绕 晕 了 自己 (或 者 其 他 阅 
读 你 代码 的 开发 者 )。 你 有 可 能 会 写 出 非常 星 座 难 懂 的 代码 : 

















var x = 200, y = 300, z = 100; 
Var 01 = { x {Yy: 42 }, Zz: ty: Zz} 


能 从 上 面 的 代码 中 看 出 x、y 和 = 最 后 的 值 是 什么 吗 ? 我 觉得 你 可 能 需要 花 点 时 间 认 真 思 
考 一 下 。 这 里 给 出 了 最 终 答案 。 


console.log( x.y, y.y, ZzZ.y ); // 300 100 42 


记 住 这 一 点 : 解构 很 不 错 也 可 以 很 有 用 ， 但 它 也 是 一 把 利 剑 ， 如 果 不 明 智 使 用 的 话 可 能 会 
伤 了 自己 (的 大 脑 )。 


2.5.2 ” 惧 套 解构 
如 果 解 构 的 值 中 有 贬 套 的 对 象 或 者 数组 ， 也 可 以 解构 这 些 嵌 套 的 值 


var al 
Var 01 


了 


[ 1 2 33 4]，, 5 EE 
{ x: 


= [ 

3 x ye 
var [a, [b,c,d],e] = ail; 
var {x: {y:{z:w}}}= oi1; 





console.log( a, b, c, d, e ); //12345 
console.log( w ); // 6 
84 | 第 2 章 


图 灵 社 区 会 员 avilang(1985945885@qq.com) 专 享 尊重 版 权 


可 以 把 贬 套 解构 当 作 一 种 展 平 对 象 名 字 空 间 的 简单 方法 。 举 例 来 说 : 
var App = { 
model: { 
User: function(){ .. } 


} 
上 


// 不 用 : 
// var User = App.modeL.User; 


var { model: { User } } = App; 


2.5.3 ”解构 参数 
你 能 在 下 面 的 代码 中 找到 其 中 的 赋值 吗 ? 

















function foo(x) { 
console.log( x ); 


} 


foo( 42 ); 





这 里 的 赋值 某 种 程度 上 说 是 隐藏 的 : 在 执行 foo(42) 的 时 候 把 42 ( 实 参 ) 赋 给 了 x ( 形 
参 ) 。 如 果实 参 / 形 参 配 对 是 一 个 赋值 ， 那 么 也 就 是 说 它 是 可 以 解构 的 ， 对 吗 ? 当然 ! 


考虑 下 面 的 参数 数组 解构 : 


function foo( [x,y])t 
console.log( x, y ); 

















} 

foo( [ 1,2 1]); //12 

foo( [11]); // 1 undefined 

foo( [] ); // undefined undefined 


参数 的 对 象 解构 也 是 可 以 的 : 


function foo( {x,y } ){ 
console.log( x, y ); 


J 

foo( { y: 1, x: 2 } ); /f/f2:4 

foo( { y: 42 } ); // undefined 42 

foo( {} ); // undefined undefined 


这 个 技术 已 经 接近 于 命名 参数 了 (一 个 JavaScript 渴望 已 久 的 特性 ! )， 因 为 这 里 对 象 的 
属性 映射 到 了 同名 的 解构 参数 。 这 也 意味 着 我 们 免费 得 到 了 (任意 位 置 上 的 ) 可 选 参数 功 
能 ， 可 以 看 到 ， 省 略 “ 参 数 ”x 就 像 我 们 期 望 的 那样 工作 。 


然 ， 前 面 介 绍 的 解构 的 所 有 变 体 都 可 用 于 参数 解构 ， 包 括 嵌 套 解构 、 默 认 值 ， 等 等 。 解 


| 
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构 还 可 以 和 其 他 的 ES6 函数 参数 功能 同时 使 用 ， 比 如 默认 参数 值 和 rest/gather 参数 。 
下 面 是 一 些 细节 展示 (当然 不 足以 囊括 所 有 可 能 的 变 体 ) : 




















function f1i([ x=2, y=3, z ]){..} 
function f2([ x, y, ...z], w){..} 
function f3([ x, y, ...72], ...w){..} 


function f4({ x: X, y }) { ..} 
function f5({ x: X = 10, y = 20 }) 
function f6({ x=10}={},{y} 


让 我 们 从 前 面 的 代码 中 找 一 个 例子 来 解释 一 下 : 


{ ..} 
={y:10}))t{..} 














function f3([ x, y, ...2], ...w) { 
console.log( x, y, z, Ww ); 


} 
f3( [] ); // undefined undefined [] [] 
f3( [1,2,3,4], 5, 6 ); // 12 [3,4] [5,6] 


这 里 使 用 了 两 个 … 运算 符 ， 它 们 都 用 于 收集 数组 (z 和 w) 中 的 值 ， 当 然 .….z 是 从 第 一 
个 数组 参数 中 剩 下 的 值 中 收集 ， 而 .….w 是 从 主 参 数 去 除 第 一 个 值 后 剩 下 的 值 中 收集 。 


1. 解构 默认 值 十 参数 默认 值 
有 一 点 比较 微妙 需要 指出 ， 也 是 你 应 该 特别 注意 的 ， 那 就 是 解构 默认 值 和 函数 参数 默认 值 
之 间 的 差别 。 举 例 来 说 : 

















function f6({ x=10}={},{y}={y: 10}){ 
console.log( x, y ); 
} 


f6(); // 10 10 





第 一 眼看 上 去 ， 我 们 似乎 为 参数 x 和 y 都 声明 了 一 个 默认 值 9， 虽然 是 以 两 种 不 同 的 形 
式 。 但 是 ， 这 两 种 方法 在 某 些 情况 下 的 行为 是 有 所 不 同 的 ， 其 区别 非 常 微妙 。 


考虑 : 
f6( {}, {} ); // 10 undefined 


稍 等 ， 为 什么 会 这 样 ? 显然 ， 参 数 x 不 是 作为 第 一 个 参数 对 象 的 同名 属性 传人 得 到 默认 
值 10。 

















但 是 为 什么 y 值 为 undefined ?作为 函数 参数 默认 值 的 { y: 19 } 值 是 一 个 对 象 ， 而 不 是 
解构 默认 值 。 因 此 ， 它 只 在 第 二 参数 没有 传人 ， 或 者 传人 undefined 的 时 候 才 会 生效 。 





























在 前 面 的 代码 中 ， 我 们 传人 了 第 二 个 参数 ({) ， 所 以 设 有 使 用 默认 值 { y: 190 }， 而 是 在 
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传人 的 空 对 象 值 { 上 进行 { y } 解构 。 











现在 ， 比 较 一 人 (yj={y: 1 和 {x=19}=Tf]。 





对 于 x 这 种 形式 的 用 法 来 说 ， 如 果 第 一 个 函数 参数 省 略 或 者 是 undefined， 就 会 应 用 个 
空 对 象 默认 值 。 然 后 ， 在 第 一 个 参数 位 置 传 入 的 任何 值 一 一 或 者 是 默认 {} 或 者 是 你 传 
入 的 任何 值 一 一 都 使 用 { x = 10 } 来 解构 ， 这 会 检查 是 否 有 xXx 属性， 如 果 没有 (或 者 
undefined)， 就 会 为 名 为 x 的 参数 应 用 默认 值 16。 











缓 口气 。 回 头 把 上 面 几 段 重读 一 遍 。 我 们 通过 代码 来 复习 一 下 : 














function f6({ x=10}={€0,{y}={y: 10}){ 
console.log( x, y ); 


f6(); // 10 10 

f6( undefined, undefined ); // 10 10 

f6( {}, undefined ); // 10 10 

f6( {}, {} ); // 10 undefined 
f6( undefined, {} ); // 10 undefined 
fest XE 2 3 从 这 3 





看 起 来 x 参数 的 默认 值 特性 可 能 比 y 的 情况 更 符合 期 望 ， 也 更 合理 一 些 。 因 此 ， 理 解 为 什 
么 {x=190】= 了 fi 形 式 与 LUy】}={y: 10} 形式 有 所 区 别 以 及 如 何 进行 区 别 是 很 重要 的 。 

















如 果 还 是 有 点 模糊 的 话 ， 那 么 回头 再 读 一 遍 ， 然 后 自己 试验 一 下 。 花 些 时 间 把 这 个 微妙 的 
知识 点 搞 清 楚 ， 将 来 你 会 感谢 自己 现在 所 做 的 一 切 的 。 

2. 骨 套 默认 : 解构 并 重组 

尽管 一 开始 看 上 去 可 能 很 难 掌 握 ， 这 里 出 现 了 一 个 很 有 趣 的 为 租 套 对 象 属性 设置 默认 值 的 
技巧 : 使 用 对 象 解构 以 及 我 称 之 为 重组 (restructuring) 的 技术 。 


考虑 在 一 个 竺 套 对 象 结构 内 的 一 组 默认 值 ， 就 像 下 面 这 样 : 


// 来 自 于 : 
// http://es-discourse.com/t/partial-default-arguments/120/7 














var defaults = { 
options: { 
remove: true, 
enable: false, 
instance: {} 


log: { 
warn: true, 
error: true 
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假设 你 有 一 个 名 为 config 的 对 象 ， 已 经 有 了 一 部 分 值 ， 但 可 能 不 是 全 部 ， 现 在 你 想 要 把 所 
有 空 槽 的 位 置 用 默认 值 设 定 ， 但 又 不 想 覆 盖 已 经 存在 的 部 分 : 


var config = { 
options: { 
remove: false, 
instance: null 
} 
二 


当然 你 可 以 像 过 去 那样 手动 实现 : 


config.options = config.options || {}; 

config.options.remove = (config.options.remove !== undefined) ? 
config.options.remove : defaults.options.remove; 

config.options.enable = (config.options.enable !== undefined) ? 


config.options.enable : defaults.options.enable; 


还 有 人 会 喜欢 通过 覆盖 赋值 方法 来 实现 这 个 任务 。 你 可 能 会 被 ES6 的 0bject.assign(..) 
工具 诱惑 (参见 第 6 章 ) 先 从 defaults 克隆 属性 ， 然 后 用 从 config 克隆 的 属性 来 覆盖 。 




















config = Object.assign( {}, defaults, config ); 


这 看 起 来 好 多 了 ， 对 吧 ? 但 是 存在 一 个 严重 问题 ! 0bject.assign(..) 是 浅 操作 ， 也 就 
是 说 在 复制 defaults.options 的 上 时候， 只 会 复制 对 象 引 用 ， 而 不 会 深层 复制 这 个 对 象 的 
属性 到 config.options 对 象 。 需 要 在 对 象 树 的 所 有 层次 ( 某 种 “递归 ”) 上 应 用 object. 
assign(..) 才能 得 到 期 望 的 深层 克隆 。 

















很 多 JavaScript 工具 库 /框架 提供 了 自己 的 对 象 深 复制 支持 ， 但 这 些 方法 和 
它们 的 使 用 技巧 超出 了 本 部 分 的 讨论 范围 。 











所 以 让 我 们 来 探讨 一 下 带 默认 值 的 ES6 对 象 解构 是 否 能 够 帮助 实现 这 一 点 : 


config.options = config.options || {}; 
config.log = config.log || 0}; 
{ 

options: { 


remove: config.options.remove = default.options.remove, 
enable: config.options.enable = default.options.enable, 
instance: config.options.instance = 
default.options.instance 
} = {}, 
log: { 
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warn: config.log.warn = defauLt.Log.warn， 
error: config.Log.error = defauLt.Log.error 
= 癸 


} = config; 





我 认为 这 虽然 没有 提供 了 虚假 保证 (实际 上 只 是 浅 复制 ) 的 0bject.assign(..) 方 法 那么 


优美 ,但 还 是 要 比 手动 方法 要 好 一 点 。 虽 然 不 幸 的 是 ， 它 还 是 有 点 繁复 。 








前 面 代码 的 方法 之 所 以 有 效 ， 是 因为 我 hack 了 解构 和 默认 值 机 制 ， 实现 了 属性 === 
undefined 检查 和 赋值 决策 。 这 里 的 巧妙 之 处 在 于 ， 我 们 解构 了 config (参见 代码 结尾 处 











的 = config)， 但 通过 config.options.enable 赋值 引用 ， 马 上 又 把 所 有 解构 值 研 值 


Config。 


还 是 有 点 繁杂 。 看 我 们 能 不 能 让 实现 更 简洁 一 些 。 


如 果 确 定 要 解构 的 所 有 各 种 属性 都 没有 重 名 的 话 ， 下 面 的 技巧 是 最 优 的 。 即 
也 可 以 使 用 这 一 技巧 ， 但 是 就 没 那 么 优美 了 一 一 需要 分 阶段 解构 ， 或 者 创建 唯 


作为 临时 别名 。 








回 到 了 


使 不 是 这 样 ， 

















局 部 变量 





如 果 我 们 把 所 有 属性 彻底 解构 到 顶层 变量 中 ， 接 着 就 可 以 立即 重组 它们 来 重新 构造 原来 的 


租 套 对 象 结构 了 。 


但 是 ， 所 有 这 些 巧 置 的 临时 变量 会 污 当 作 用 域 。 所 以 ， 我 们 用 一 个 { } 把 这 块 包 起 来 成 为 


一 个 块 作 用 域 (参见 2.1 节 ) : 
// 把 defauLts 合 并 进 config 
{ 


// 带 默认 值 赋值 的 ) 解 构 
let { 
options: { 
remove = defaults.options.remove, 
enable = defaults.options.enable, 
instance = defaults.options.instance 
} = {}， 
log: { 
warn = defaults. log.warn, 
error = defauLts.Log.error 
} = 癸 


} = config; 





// 重组 

config = { 
options: { remove, enable, instance }, 
Log: { warn, error } 


]3 





} 
这 看 起 来 好 多 了 ， 是 不 是 ? 
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语法 


还 可 以 用 箭头 IIFE 代替 一 般 的 { } 块 和 let 声明 来 实现 块 封 装 。 解 构 
赋值 /默认 值 会 被 放 在 参数 列表 中 ， 而 重组 的 过 程 会 被 放 在 函数 体 的 
return 语句 中 。 








重组 部 分 中 的 { warn，error } 这 种 语法 形式 对 你 来 说 可 能 有 点 陌生 ， 这 称 为 “简洁 属 
性 ”， 我 们 将 在 下 一 小 节 介 绍 ! 


2.6 ”对 象 字面 量 扩 展 


ES6 为 普通 { .. } 对 象 字 面 量 新 增 了 几 个 重要 的 便利 扩展 。 

















2.6.1 简洁 属性 
你 对 下 面 这 种 形式 的 对 象 字面 量 声明 肯定 已 经 非常 熟悉 了 















































如 果 觉 得 总 是 要 写 x: x 令 人 厌烦 的 话 ， 那 么 这 里 有 一 个 好 消息 。 就 是 如 有 果 你 需要 定义 一 个 
与 某 个 词法 标识 符 同名 的 属性 的 话 ， 可 以 把 x: x 简写 为 x。 考 虑 : 





2.6.2 简洁 方法 
与 刚刚 介绍 的 简洁 属性 思路 类 似 ， 为 了 方便 表达 ， 关 联 到 对 象 字面 量 属性 上 的 函数 也 有 简 
洁 形 式 。 


老 方 法 : 

















var oO={ 
x: function(){ 


WW function(){ 
J 


oo 
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在 ES6 中 则 可 以 ; 








尽管 看 上 去 x() { .. } 就 是 x: function(){ .. } 的 简写 形式 , 但 简洁 方 
法 有 特殊 的 性 质 ， 这 是 它们 的 前 韭 所 不 具备 的 ， 具 体 来 说 ， 就 是 支持 super 
(参见 2.6.5 节 )。 





生成 器 (参见 第 4 章 ) 也 有 一 个 简洁 方法 形式 : 


varF OLS 


*foo() { .. } 
1. 简洁 未 命名 
这 种 方便 的 简写 形式 是 很 诱 人 的 ， 但 有 一 个 微妙 的 细节 需要 注意 。 我 们 分 析 下 面 这 段 前 
ES6 代码 来 展示 这 一 点 ， 这 段 代 码 可 能 令 人 想 要 通过 简洁 方法 重 构 : 














function runSomething(o) { 
var x = Math.random(), 
y = Math.random(); 


return o.something( x, y ); 


} 


runSomething( { 
something: function something(x,y) { 
if (x > y) { 
// 交换 x 和 y 的 递归 调用 
return something( y, x ); 


} 


return y - x; 
} 
} ); 


这 段 简单 直接 的 代码 就 是 产生 两 个 随机 数字 ， 然 后 用 大 的 减 去 小 的 。 但 这 里 重点 不 是 这 段 
代码 做 了 些 什么 ， 而 是 它 是 如 何 做 的 。 我 们 重点 关注 对 象 字 面 量 和 函数 定义 ， 可 以 看 到 如 
下 所 示 : 


runSomething( { 
something: function something(x,y) { 
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} 
jo 





为 什么 这 里 既 有 something: 又 有 function something ? 这 不 是 重复 吗 ? 实际 上 并 不 是 ， 二 
者 各 有 不 同 的 作用 ， 都 是 必要 的 。 属 性 something 使 得 我 们 能 够 通过 o.something(..) 来 调 
用 ， 像 是 它 的 公开 名 称 。 而 第 二 个 something 是 一 个 词法 名 称 ， 用 于 在 其 自身 内 部 引用 这 

个 函数 ， 目 的 是 用 于 递归 。 











你 能 看 出 为 什么 return something(y,x) 这 一 行 需要 名 称 something 来 引用 这 个 函数 吗 ? 这 
个 对 象 没 有 词法 名 称 ， 因 此 它 无 法 使 用 return o.something(y,x) 或 者 某 种 类 似 的 形式 。 


当 对 象 字面 量 有 一 个 标识 名 称 时 ， 这 实际 上 是 一 个 很 常见 的 方法 。 比 如 : 


oy 





var controller = { 
makeRequest: function(..){ 


// .， 


ControLLer .makeRequest(..); 
3 
}; 
这 是 一 个 好 方法 吗 ? 可 能 是 ， 也 可 能 不 是 。 这 里 是 在 假定 名 称 controller 将 会 一 直 指 向 所 
需 的 对 象 。 但 是 可 能 实际 并 非 如 此 一 一 makeRequest(..) 函数 并 不 控制 外 部 代码 ， 因 此 无 法 
强制 这 一 点 。 这 可 能 反 过 来 会 伤 到 你 自己 。 








还 有 一 些 人 可 能 喜欢 采用 this 这 种 方法 来 定义 : 


var controller = { 
makeRequest: function(..){ 
//.. 
this.makeRequest(..); 
} 
}; 




















这 看 起 来 不 错 ， 如 果 总 是 通过 controller.makeRequest(..) 调用 方法 也 可 以 工作 。 但 是 ， 
如 果 要 像 下 面 这 么 做 的 话 ， 现 在 就 有 了 一 个 this 绑 定 陷阱 : 














btn.addEventListener( "click", controller.makeRequest, false ); 














= 可 以 通过 传递 controller .makeRequest.bind(controller) 作为 处 理 国 数 引 用 来 绑 定 
这 个 事件 。 但 是 这 种 方法 就 不 怎么 吸引 人 了 。 


或 者 ， 如 果 内 层 的 this.makeRequest(..) 调用 需要 从 内 套 函 数 内 部 调用 会 怎样 呢 ? 那 就 得 
有 另外 一 个 this 绑 定 ， 这 种 情况 通常 用 var self = this 这 种 hack 的 方法 来 解决 ， 就 像 : 














var controller = { 
makeRequest: function(..){ 
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var self = this; 
btn.addEventListener( "click", function(){ 
Vea 
self.makeRequest(..); 
}, false ); 
}; 


这 就 更 恶心 了 。 


关于 this 绑 定 规则 和 陷阱 的 更 多 信息 ， 参 见 本 系列 《你 不 知道 的 JavaScript 
(上 卷 )》 第 二 部 分 的 1~2 章 。 





好 ， 那 么 所 有 这 些 又 和 简洁 方法 有 什么 关系 呢 ? 回想 一 下 我 们 的 something(..) 方法 定义 : 





runSomething( { 
something: function something(x,y) { 
ff 3 
} 
3 


这 里 的 第 二 个 something 提供 i a 守 ， 总 是 指向 这 个 函数 本 身 ， 为 
我 们 提供 了 一 个 完美 的 用 于 递 定 等 不 会 和 this 纠缠 也 不 需 
要 并 不 可 靠 的 对 象 引 用 。 


非常 棒 ! 
所 以 ， 现 在 我 们 可 以 把 这 个 函数 引用 重 构 为 下 面 的 ES6 简洁 方法 形式 ; 








runSomething( { 
something(x,y) { 
if (x > y) { 
return something( y, x ); 


return y - x; 
} 
Ho 


第 一 眼看 上 去 很 好 ， 但 是 这 段 代码 会 崩溃 。return something(..) 调用 将 找 不 到 something 
标识 符 ， 因 此 会 得 到 一 个 ReferenceError。 这 是 为 什么 呢 ? 


前 面 的 ES6 代码 片段 会 被 解释 为 : 





runSomething( { 
something: function(x,y){ 
if (x > y) { 
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return something( y, x ); 


} 


return y - X; 
} 
1 


仔细 观察 。 看 到 问题 所 在 了 吗 ? 这 个 简洁 方法 定义 意味 着 something: function(x,y)。 看 
出 我 们 依赖 的 第 二 个 something 是 如 何 被 省 略 了 吗 ? 换 名 话说， 简洁 方法 意味 着 匿名 函数 
啊 ， 有 点 恶心 。 

可 能 你 会 把 => 箭头 函数 当 作 是 对 这 种 情况 的 一 个 好 的 解决 方案 ,但 是 它 同 


样 也 是 不 够 的 ， 因 为 它们 也 是 匿名 函数 表达 式 。 我 们 将 在 2.8 节 介 绍 这 一 
部 分 。 

















部 分 挽回 局 面 的 消息 是 我 们 的 something(x,y) 简洁 方法 不 会 是 完全 匿名 的 。 参 见 7.1 节 来 
获取 关于 ES6 函数 名 推导 规则 的 信息 。 对 于 我 们 的 递归 来 说 这 没有 什么 帮助 ， 但 是 至 少 有 
助 于 调试 。 

所 以 对 于 简洁 方法 能 得 出 什么 结论 呢 ” 它 们 简洁 方便 。 但 是 应 该 只 在 不 需要 它们 执行 递 
了 或 者 事件 绑 定 / 解 绑 定 的 时 候 使 用 。 否 则 的 话 ， 就 按照 老式 的 something: function 
something(..) 方法 来 定义 吧 。 














NS 





大 量 方法 可 能 会 从 简 洗 方法 定义 中 获 益 ， 所 以 这 是 好 消息 ! 只 是 需要 注意 这 几 种 有 命名 问 
题 的 情况 。 


2.ES5 GetterSetter 

严格 说 来 ，ES5 定义 了 getter/setter 字面 量 形式 ， 但 是 没 怎 么 被 使 用 ， 主 要 是 因为 缺少 
transpiler 来 处 理 这 个 新 语法 (实际 上 也 是 ES5 新 增 的 唯一 主要 新 语法 )。 所 以 尽管 这 并 不 
是 一 个 新 的 ES6 特性 ， 我 们 还 是 简单 介绍 一 下 这 种 形式 ， 因 为 很 可 能 在 ES6 及 以 后 它们 会 
得 到 更 广泛 地 使 用 。 





























考虑 : 
var 0 = 
dy :10, 
get id() { return this.__id++; }, 
set id(v) { this. id = v; } 
} 
o.id; // 10 
Gilds 万 
o.id = 20; 
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o.id; // 20 


// and: 
0. id; // 21 
0. id; // 21- -保持 不 变 ! 


这 些 getter 和 setter 字面 量 形 式 也 可 以 出 现在 类 中 ， 参 见 第 3 章 。 








可 能 不 是 显而易见 ， 实 际 上 setter 字面 量 必须 有 且 只 有 一 个 声明 参数 ， 省 略 
这 个 参数 或 者 列 出 多 余 的 都 是 语法 错误 。 所 需 的 单个 参数 可 以 使 用 解构 和 默 
认 值 (例如 ，set id({ id: v = 0 }) { .. }), 但 是 gather/rest... 是 不 允许 
的 (set id(...v) { .. })。 

















2.6.3 ”计算 属性 名 


你 可 能 也 经 历 过 下 面 代码 片段 中 的 这 种 情况 ， 甚 中 的 一 个 或 多 个 属性 名 来 自 于 某 个 表达 
式 ， 因 此 无 法 用 对 象 字面 量 表达 。 


























var prefix = "user_"; 
var o ={ 

baz: function(..){ .. } 
}; 


o[ prefix + "foo" ] 
of[ prefix + "bar" ] 


function(..){ .. }; 
function(..){ .. }; 


ES6 对 对 象 字面 定义 新 增 了 一 个 语法 ， 用 来 支持 指定 一 个 要 计算 的 表达 式 ， 
性 名 。 考 虑 : 


其 结果 作为 属 


var prefix = "user_"; 


Var ‘0a 
baz: function(..){ .. }, 
[ prefix + "foo" ]: function(..){ .. }, 
[ prefix + "bar"” ]: function(..){ .. } 


}; 











对 象 字面 定义 属性 名 位 置 的 [ .. ] 中 可 以 放置 任意 合法 表达 式 。 
计算 属性 名 最 常见 的 用 法 可 能 就 是 和 Symbolts 共同 使 用 (我 们 将 在 2.13 市 中 介绍 )。 比 如 : 


var oO={ 
[Symbol.toStringTag]: "really cool thing", 


站 
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Symbol.toStringTag 是 一 个 特殊 的 内 置 值 ， 我 们 用 [ .. ] 语法 为 其 求 值 ， 所 以 我 们 可 以 把 
值 "really cool thing" 赋 给 这 个 特殊 的 属性 名 。 


计算 属性 名 也 可 以 作为 简洁 方法 或 者 简洁 生成 器 的 名 称 出 现 : 
var oo={ 
["f" + "oo"]() { .. } 7/ 计算 出 的 简洁 方法 
*["b" + "ar"](){ .. } // 计算 出 的 简洁 生成 器 
}; 
2.6.4 ” 设 定 [[Prototype]] 
这 里 我 们 不 会 详细 介绍 原型 ， 要 想 了 解 更 多 信息 ， 参 见 本 系列 《你 不 知道 的 JavaScript (上 
卷 )》 第 二 部 分 。 


有 时 候 在 声明 对 象 字 面 量 的 时 候 设 定 这 个 对 象 的 [[Prototype]] 是 有 用 的 。 下 面 的 用 法 在 
很 多 JavaScript 引擎 中 已 经 作为 非 标准 扩展 有 一 段 时 间 了 ， 而 在 ES6 中 这 已 经 标准 化 了 : 





var o1 = { 
A 

}; 

var 02={ 
__proto_ 01 
有 a 

上 


02 通过 普通 的 对 象 字 面 量 声明 ， 但 是 它 也 [[Prototype]] 连接 到 了 o1。 这 里 的 __proto__ 
属性 名 也 可 以 是 字符 串 "__proto_", 但 是 注意 它 不 能 是 计算 属性 名 结果 (参见 前 一 节 )。 


退 一 步 讲 ， 对 _proto__ 的 使 用 是 有 和 争议 的 。 它 是 JavaScript 多 年 前 的 属性 扩展 ， 最 后 被 
ES6 标准 化 ， 但 似乎 标准 化 得 不 情 不 愿 。 许 多 开发 者 认为 不 应 该 使 用 它 。 实 际 上 ， 它 是 在 
ES6 的 “附录 B” 中 出 现 的 ， 这 一 部 分 列 出 的 都 是 JavaScript 只 因 兼 容 性 问题 不 得 不 标准 
化 的 特性 。 











我 勉强 支持 _proto_ 作为 对 象 字 面 量 定义 的 一 个 键 值 ， 但 我 绝对 不 支持 
作为 对 象 属性 形式 来 使 用 它 ， 比 如 o0.__proto__。 这 种 形式 既是 getter 又 是 
setter (也 是 由 于 兼容 性 的 原因 )， 但 是 肯定 还 有 更 好 的 选择 。 参 见 本 系列 
《你 不 知道 的 JavaScript (上 卷 )》 第 二 部 分 。 








要 为 已 经 存在 的 对 象 设 定 [[Prototype]]， 可 以 使 用 ES6 工具 0bject.setPrototypeOf(..)。 
考虑 : 


var ol = { 


//.. 
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下 


var 02 = { 
全 学 
}; 


Object.setPrototypeOf( 02, o1 ); 
我 们 会 在 第 6 章 再 次 讨论 0bject。“0bject.setPrototype0f(..) 静态 函数 ” 


一 节 详 细 介 绍 了 0bject.setProto type0f(..)。 还 可 以 参考 6.2.4 节 了 解 把 o2 
原型 关联 到 ol 的 另外 一 种 形式 。 





























2.6.5 ”super 对 象 


通常 把 super 看 作 只 与 类 相关 。 但 是 ， 鉴 于 JavaScript 的 原型 类 而 非 类 对 象 的 本 质 ，super 
对 于 普通 (plain) 对 象 的 简洁 方法 也 一 样 有 效 ， 特 性 也 基本 相同 。 


考虑 : 


var o1 = { 
foo() { 


console.log( "o1:foo" ); 
} 
}; 


var 02={ 
foo() { 
super .foo(); 
console.log( "02:foo" ); 
} 
}; 


Object.setPrototypeOf( 02, o1 ); 


02.foo(); // o1:foo 
// o2:foo 





super 只 允许 在 简洁 方法 中 出 现 ， 而 不 允许 在 普通 函数 表达 式 属性 中 出 
现 。 也 只 允许 以 super.XXX 的 形式 (用 于 属性 /方法 访问 ) 出 现 ， 而 不 能 以 
super() 的 形式 出 现 。 




















02.foo() 方法 中 的 super 引用 静态 锁定 到 o2， 有 具体 说 是 锁定 到 oz 的 [[Prototype]]。 基 本 








上 这 里 的 super 就 是 0bject.getPrototype0f(02) 一 一 当然 会 决议 到 ol 一 一 这 是 它 如 何 找 到 
并 调用 o1.foo() 的 过 程 。 
关于 super 的 完整 细节 ， 参 见 3.4 节 。 
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2.7 ”模板 字面 量 


在 这 一 小 节 的 最 开始 ， 首 先 我 要 大 声 指出 ES6 这 个 特性 的 名 称 非常 具有 误导 性 ， 其 根据 你 
对 单词 模板 (template) 的 理解 而 定 。 


很 多 开发 者 会 把 模板 看 作 是 可 复 用 、 可 入 染 的 文字 片段 ， 就 像 绝 大 多 数 模板 引擎 
(Mustache、Handlebars 等 ) 提供 的 功能 那样 。ES6 对 template 这 个 词 的 使 用 可 能 暗示 着 
某 种 类 似 的 东西 ， 就 像 一 种 声明 可 以 被 重新 泻 染 的 在 线 模板 字面 量 的 方法 。 但 是 ， 对 于 这 
个 特性 来 说 ， 这 种 看 法 并 不 完整 

所 以 ， 在 继续 之 前 ， 我 要 把 它 重 命名 为 它 应 该 被 称 为 的 : 插入 字符 串 字 面 量 (或 者 简称 为 


interpoliteral ) 。 









































你 已 经 非常 了 解 ， 可 以 用 "或 ' 界定 符 声 明 字 符 串 ， 也 了 解 这 不 是 ( 像 某 些 语言 中 那样 的 ) 
smart 字符 串 ， 其 中 的 内 容 可 以 插入 表达 式 被 重新 解析 。 


但 是 ，ES6 引入 了 一 个 新 的 字符 串 字 面 量 ， 使 用 ` 作为 界定 符 。 这 样 的 字符 串 字 面值 支持 
内 入 基本 的 字符 串 播 入 表达 式 ， 会 被 自动 解析 和 求 值 。 
































下 面 是 老 的 前 ES6 方式 : 
var name = "Kyle"; 
var greeting = "Hello " + name + "!"; 
console.log( greeting ); // "Hello Kyle!" 
console.log( typeof greeting ); // "string" 














下 面 是 新 的 ES6 方式 : 





var Name = "Kyle"; 

var greeting = ‘Hello S${name}!; 

console.log( greeting ); // "Hello Kyle!" 
console.log( typeof greeting ); // "string" 

















你 可 以 看 到 ， 这 里 在 一 组 字符 外 用 `.… 来 包围 ， 这 会 被 解释 为 一 个 字符 串 字 面 量 ， 但 是 其 
中 任何 儿 ..} 形式 的 表达 式 都 会 被 立即 在 线 解 析 求 值 。 这 种 形式 的 解析 求 值 形式 就 是 插入 
( 比 模板 要 精确 一 些 )。 


插入 字符 串 字 面 量 表达 式 的 结果 就 是 普通 的 字符 串 ， 值 赋 给 变量 greeting。 
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typeof greeting == "string" 说 明了 为 什么 不 要 把 这 些 实体 当 作 是 特殊 的 模 
板 值 这 一 点 很 重要 ， 因 为 不 能 把 这 个 字面 量 未 求 值 的 形式 赋 给 某 个 实体 然后 
复 用 。`.…… 字符 串 字 面 量 更 像 是 HIFE， 因 为 它 会 自动 展开 求 值 。 一 个 `.… 字 
符 串 字 面 量 的 结果 就 是 一 个 字符 串 。 























插入 字符 串 字 面 量 的 一 个 优点 是 它们 可 以 分 散在 多 行 : 











Var text = 

‘Now is the time for all good men 
to come to the aid of their 
country! ; 


console.log( text ); 

// Now is the time for all good men 
// to come to the aid of their 

// country! 





插入 字符 串 字 面 量 中 的 换行 (新 行 ) 会 在 字符 串 值 中 被 保留 。 


在 字面 量 值 中 ， 除 非 作 为 明确 的 转 义 序列 出 现 ，\r 回 车 符 ( 码 点 U+699D) 的 值 或 者 回 车 换 
行 符 \r\n 〈 码 点 Ut669D 和 Ut6699A) 都 会 被 标准 化 为 \n 换行 符 〈 码 点 U+699A)。 但 是 别 担 
心 ， 这 种 标准 化 非常 少见 ， 很 可 能 只 有 在 复制 粘贴 文本 到 JavaScript 文件 的 时 候 才 会 出 现 。 


2.7.1 插入 表达 式 
在 插入 字符 串 字 面 量 的 ${..} 内 可 以 出 现任 何 合 半 的 表达 式 ， 包 括 函 数 调用 、 在 线 函 数 表 
达 式 调用 ， 甚 至 其 他 插入 字符 串 字面 量 ! 


考虑 : 

































































function upper(s) { 
return s.toUpperCase(); 


var who = "reader"; 


Var text = 
‘A very ${upper( "warm" )} welcome 
to all of you S${upper( ‘${who}s. )}!.; 


console.log( text ); 
// A very WARM welcome 
// to all of you READERS! 

















这 里 ,与 who +"s" 的 形式 相 比 ， 内 层 的 `${who}s` 插入 字符 串 字 面 量 对 我 们 合并 变量 who 
和 字符 串 "s" 来 说 会 方便 一 点 。 骨 套 插 入 字符 串 字 面 量 在 一 些 情况 下 是 有 所 帮助 的 ， 但 是 
如 有 果 你 发 现 需要 频繁 使 用 这 种 形式 ， 那 么 就 要 警惕 了 ， 不 然 你 会 发 现 自己 得 艇 套 好 多 层 。 
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如 果 是 这 样 的 话 ， 那 么 很 可 能 你 的 字符 串 产 生 过 程 需要 进行 某 种 抽象 。 


提醒 一 下 ， 在 代码 中 使 用 这 些 新 武器 的 时 候 要 注意 可 读 性 。 就 像 使 用 默认 值 
表达 式 和 解构 赋值 表达 式 的 时 候 一 样 ， 能 够 做 某 事 并 不 意味 着 就 应 该 这 么 
做 。 千 万 不 要 过 分 热衷 于 ES6 的 新 技巧 ， 使 得 你 的 代码 的 “聪明 ”程度 超过 
了 你 自己 或 你 的 同事 。 



































表达 式 作用 域 
这 里 对 于 用 来 在 表达 式 中 决议 变量 的 作用 域 有 一 点 简单 说 明 。 我 在 前 面 提 到 过 插入 字符 串 
字面 量 有 点 像 是 一 个 IFE， 这 么 看 也 能 解释 它 的 作用 域 特 性 。 


考虑 : 























function foo(str) { 
var name = "foo"; 
console.log( str ); 


} 
function bar() { 
var name = "bar"; 


foo( ‘Hello from ${name}!. ); 
} 


var name = "global"; 


bar(); // "Hello from bar!" 





`.. 字符 串 字 面值 展开 的 时 候 ， 在 函数 bar() 内 部 ， 它 可 用 的 作用 域 找到 bar() 的 变量 
name 的 值 "bar"。 全 局 name 和 foo() 的 name 都 不 影响 结果 。 换 名 话说 ， 揪 入 字符 串 字 面 量 
在 它 出 现 的 词法 作用 域内 ， 没 有 任何 形式 的 动态 作用 域 。 





























2.7.2 标签 模板 字面 量 
这 里 再 次 重新 命名 这 个 特性 来 明确 表达 其 功能 : 标签 字符 串 字 面 量 (tagged string literal) 。 


老实 说 ， 这 是 ES6 提供 的 一 个 比较 酷 的 技巧 。 可 能 看 起 来 有 点 奇怪 ， 也 可 能 一 眼看 上 去 不 
是 那么 实用 。 但 一 旦 花费 一 定时 间 去 理解 这 个 功能 ， 标 签字 符 串 字面 量 的 用 处 可 能 会 令 你 
大 吃 一 惊 。 


举例 来 说 : 
























































function foo(strings, ...values) { 
console.log( strings ); 
console.log( values ); 


} 
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var desc = "awesome"; 


foo `Everything is $f{desc}!; 
// [ "Everything is ", "!"] 
// [ "awesome" ] 





我 们 花 点 时 间 来 思考 一 下 前 面 代 码 中 到 底 发 生 了 什么 。 首 先 跳出 的 最 不 和 谐 的 部 分 是 
foo .Everything...…;。 这 种 形式 之 前 没有 出 现 过 。 这 是 什么 ? 

本 质 上 说 ， 这 是 一 类 不 需要 ( .. ) 的 特殊 函数 调用 。 标 签 (tag) 部 分 ， 即 “.… 字符 串 字 
面 量 之 前 的 foo 这 一 部 分 , 是 一 个 要 调用 的 函数 值 。 实 际 上 ， 它 可 以 是 任意 结果 为 函数 的 
表达 式 ， 其 至 可 以 是 一 个 结果 为 另 一 个 函数 的 函数 调用 ， 就 像 下 面 这 样 : 
































function bar() { 
return function foo(strings, ...values) { 
console.log( strings ); 
console.log( values ); 
} 
} 


var desc = "awesome"; 
bar() ` Everything is S${desc}!; 


// [ "Everything is ", "!"] 
// [ "awesome" ] 





但 是 传人 为 了 字符 串 字 面 量 作为 标签 被 调用 的 foo(..) 函数 的 是 什么 呢 ? 


第 一 个 参数 ， 名 为 strings， 是 一 个 由 所 有 普通 字符 串 (插入 表达 式 之 间 的 部 分 ) 组 成 的 
数组 。 得 到 的 strings 数组 中 有 两 个 值 : "Everything is" 和 "!"。 


我 们 的 例子 中 使 用 .. .gather/rest 运算 符 把 其 余 所 有 参数 值 收集 到 名 为 vatlues 的 数组 中 
(参见 2.2 节 )， 这 是 为 了 方便 起 见 ， 当 然 也 可 以 把 strings 参数 后 面 的 其 余部 分 都 作为 独 
立 命 名 的 参数 。 


收集 到 values 数组 的 参数 是 已 经 求 值 的 在 字符 串 字 面值 中 插入 表达 式 的 结果 。 所 以 显然 我 
们 的 例子 中 values 的 唯一 元 素 是 "awesome"。 


你 可 以 这 样 看 待 这 两 个 数组 : vatues 中 的 值 是 分 隔 符 ， 就 好 像 用 它们 连接 在 strings 中 的 
值 ， 然 后 把 所 有 这 些 都 连接 到 一 起 ， 就 得 到 了 一 个 完成 的 插入 字符 串 值 。 
标签 字符 串 字 面 量 就 像 是 一 个 插入 表达 式 求 值 之 后 ， 在 最 后 的 字符 串 值 编译 之 前 的 处 理 步 
又 ， 这 个 步骤 为 从 字面 值 产生 字符 串 提 供 了 更 多 的 控制 。 


一 般 来 说 ， 字 符 串 字面 量 标签 函数 (前面 代码 中 的 foo(..)) 要 计算 出 一 个 适当 的 字符 串 
并 将 甚 返回， 这 样 就 可 以 像 使 用 非 标签 字符 串 字 面 量 一 样 把 标签 字符 串 字 面 量 作为 一 个 值 
来 使 用 了 : 
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function tag(strings, ...values) { 
return strings.reduce( function(s,v,idx){ 


return s + (idx > 0 ? values[idx-1] : "") + v; 
BF 
} 
var desc = "awesome"; 
var text = tag`Everything is S${desc}!.; 
console.log( text ); // Everything is awesome! 
在 这 段 代 码 中 ，tag(.. 个 直通 操作 ， 因 为 它 不 执行 任何 具体 修改 ， 而 只 是 使 用 








reduce(..) 进行 循环 ， strings 和 values 连接 到 一 起 ， 就 像 非 标签 字符 串 字面 量 所 做 的 
一 样 。 

















那么 有 哪些 实际 应 用 呢 ? 有 许多 高 级 应 用 已 经 超出 了 本 部 分 的 讨论 范围 。 但 是 ， 这 里 还 是 
给 出 了 一 个 简单 的 思路 用 来 把 数字 格式 化 为 美元 表示 法 〈 类 似 于 简单 的 本 地 化 ) : 








function dollabillsyall(strings, ...values) { 
return strings.reduce( function(s,v,idx){ 
if (idx > 0) { 
if (typeof values[idx-1] == "number") { 
// 看 ， 这 里 也 使 用 了 插入 全 符 串 字面 量 ! 
s += ‘$${values[idx-1].toFixed( 2 )}; 
































} 
else { 
s += values[idx-1]; 
} 
} 
return S + Vv; 
二 
} 
var amt1 = 11.99， 
amt2 = amt1 * 1.08, 
name = "Kyle"; 


var text = dollabillsyall 

‘Thanks for your purchase, ${name}! Your 
product cost Was S${amt1}, which with tax 
Comes out to $f{amt2}.. 


console.log( text ); 

// Thanks for your purchase, Kyle! Your 

// product cost was $11.99, which with tax 
// comes out to $12.95. 


如 果 在 values 中 遇 到 一 个 number 值 ， 就 在 其 之 前 放 一 个 "$"， 然 后 用 toFixed(2) 把 它 格 
式 化 为 两 个 十 进 制 数字 的 形式 ， 否 则 就 让 这 个 值 直 接 通 过 而 不 做 任何 修改 。 
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原始 〈raw) 字符 串 



































在 前 面 的 代码 中 ， 标 签 函数 接收 第 一 个 名 为 strings 的 参数 ， 这 是 一 个 数组 。 但 是 还 包括 


了 一 些 额 外 的 数据 : 所 有 字符 串 的 原始 未 处 理 版 本 。 可 以 像 下 面 这 样 通过 .raw 属性 访问 这 




















些 原始 字符 串 值 ; 











function showraw(strings, ...values) { 
console.log( strings ); 
console.log( strings.raw ); 


} 


showraw Hello\nWorld.; 
// [ "Hello 
// World" ] 
// [ "Hello\nWorld" ] 


原始 版 本 的 值 保留 了 原始 的 转 义 码 \n 序列 (\ 和 n 是 独立 的 字符 )， 而 处 








ES6 提供 了 一 个 内 建 函 数 可 以 用 作 字 符 串 字面 量 标签 : String.raw(.， 
strings 的 原始 版 本 

console.log( ‘Hello\nWorld. ); 

// Hello 

// World 


console.log( String.raw Hello\nWorld. ); 
// Hello\nWorld 


String.raw Hello\nWorld’ .length; 
// 12 


字符 串 字 面 量 标签 的 其 他 应 用 包括 全 球 化 、 本 地 化 等 的 特殊 处 理 


2.8 箭头 函数 



































o 








理 过 的 版 本 把 它 
当 作 是 一 个 单独 的 换行 符 。 二 者 都 会 应 用 前 面 提 到 过 的 行 结束 标准 化 过 程 。 


它 就 是 传 出 


本 章 前 面 已 经 介绍 了 一 些 函 数 中 this 2 同时 本 系列 《你 不 知道 的 JavaScript 








EE 








(上 卷 )》 第 二 部 分 中 对 此 也 有 详细 介绍 。 理 解 使 用 普通 函数 基于 this 编程 
的 问题 是 很 重要 的 ， 因 为 这 是 新 的 ES6 56 箭头 了 数 => 特性 引入 的 主要 动因 。 











让 我 们 先 来 展示 一 下 与 普通 函数 相 比 箭头 函数 是 什么 样子 : 


function foo(x,y) { 
return x + y; 


// 对 比 


var foo = (x,y) => x + y; 


带 来 的 令 人 姐 直 
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箭头 函数 定义 包括 一 个 参数 列表 〈 零 个 或 多 个 参数 ， 如 果 参 数 个 数 不 是 一 个 的 话 要 用 ( .. ) 
包围 起 来 ) ， 然 后 是 标识 =>， 函 数 体 放 在 最 后 。 


所 以 ， 在 前 面 的 代码 中 ， 箭 头 国 数 就 是 (x,y) => x + y 这 一 部 分 ， 然 后 这 个 国 数 引用 被 赋 


给 变量 foo。 


只 有 在 函数 体 的 表达 式 个 数 多 于 1 个 ， 或 者 国 数 体 包含 非 表 达 式 语句 的 时 候 才 需要 用 { .… } 
包围 。 如 果 只 有 一 个 表达 式 ， 并 且 省 略 了 包围 的 { .. } 的 话 ， 则 意味 着 表达 式 前 面 有 一 个 
隐 含 的 return， 就 像 前 面 代码 中 展示 的 那样 。 


这 里 列 出 了 儿 种 不 同形 式 的 箭头 函数 : 












































var f1 = () => 12; 
var f2 = x => x * 2; 
var f3 = (x,y) => { 
Var Zz =X*2+y; 
y++; 
X *= 3; 
return (x+y+7z)/2; 


] 
箭头 函数 总 是 函数 表达 式 ， 并 不 存在 箭头 函数 声明 。 我 们 还 应 清楚 箭头 函数 是 匿名 国 数 表 
达 式 一 一 它们 没有 用 于 递归 或 者 事件 绑 定 / 解 绑 定 的 命名 引用 但 7.1 节 将 会 讨论 ES6 
中 用 于 调试 目的 的 函数 名 推导 规则 。 








箭头 函数 支持 普通 函数 参数 的 所 有 功能 ， 包 括 默 认 值 、 解 构 、rest 参 


数 ， 等 等 。 





箭头 函数 语法 清晰 简洁 ， 这 使 它们 表面 上 看 起 来 对 于 编写 更 简练 的 代码 很 有 吸引 力 。 于 
是 ， 几 乎 所 有 关于 ES6 的 文献 (除了 本 系列 ) 似乎 都 立即 且 没 有 异议 地 接受 了 稍 头 函数 作 
可 以 说 这 里 关于 箭头 函数 的 讨论 中 几乎 所 有 的 例子 都 是 简短 的 单 句 工具， 比如 作为 回调 孙 
数 传递 给 各 种 工具 的 那些 。 举 例 来 说 : 

var a = [1,2,3,4,5]; 

a= a.map( Vv =>v*2); 

console.log( a ); // [2,4,6,8,10] 
这 些 例子 中 你 使 用 了 这 样 的 在 线 函 数 表达 式 ， 它 们 也 符合 在 单个 语句 中 执行 一 个 快速 计算 
并 返回 结果 的 模式 ， 这 时 候 比 起 繁复 的 function 关键 字 和 语法 ， 箭 头 函 数 确实 看 起 来 是 更 
有 吸引 力 的 轻 量 灰 代 工具 。 
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大 多 数 人 会 赞叹 于 这 些 示例 的 简洁 ， 我 猜 你 也 是 这 样 ! 


但 是 这 里 我 要 提醒 你 ， 使 用 箭头 国 数 语法 替代 其 他 普通 的 多 行 国 数 ， 特 别 是 那些 通常 会 被 
自然 表达 为 函数 声明 的 情况 ， 是 不 合理 的 。 


回忆 一 下 本 章 前 面 的 doLLabiLLsyatLL(..) 字符 串 字 面 量 标签 函数 ， 把 它 替 换 为 使 用 => 
语法 : 

















var dollabillsyall = (strings, ...values) => 
strings.reduce( (s,v,idx) => { 
if (idx > 0) { 
if (typeof values[idx-1] == "number") { 
// 看 ， 这 里 也 使 用 了 插入 字符 串 字面 量 ! 
s += ‘$${values[idx-1].toFixed( 2 )}; 





} 
else { 
s += values[idx-1]; 
} 
} 


return s + Vv; 


}, "" ); 


在 这 个 例子 中 ， 我 所 做 的 唯一 修改 就 是 去 掉 了 function、return 和 一 些 { .. }， 然 后 插入 
了 => 和 var。 对 于 这 段 代码 来 说 ， 可 读 性 有 了 明显 的 改进 吗 ? 


实际 上 ， 我 认为 缺少 return 和 外 层 的 { .，} 一 定 程度 上 模糊 了 reduce(..) 调用 是 
dottabittsyatt(. .) 函数 中 唯一 的 语句 ， 以 及 它 的 返回 值 就 是 调用 的 返回 值 这 一 事实 。 另 
外 ， 有 经 验 的 人 会 在 代码 中 搜索 单词 function 来 寻找 作用 域 的 边界 ， 现 在 则 需要 寻找 => 
标识 ， 这 在 大 段 代码 中 肯定 更 加 难以 发 现 。 


虽然 不 是 一 ee 
长 度 负 相关 。 这 个 函数 越 长 ，=> 带 来 的 好 处 就 越 小 ， 函 数 越 短 ，=> 带 来 的 好 处 就 越 大。 


我 认为 更 合理 的 做 法 是 只 在 确实 需要 简短 的 在 线 函 数 表达 式 的 时 候 才 采用 =>， 而 对 于 那些 
一 般 长 度 的 函数 则 无 需 改变 。 
























































不 只 是 更 短 的 语法 ， 而 是 this 
对 => 的 关注 多 数 都 在 于 从 代码 中 去 掉 function、return 和 { .，]} 节省 了 那些 宝贵 的 键 
盘 输入 。 


但 是 ， 目 前 为 止 我 们 省 略 了 一 个 重要 的 细节 。 这 一 节 开 头 提 到 => 函数 与 this 绑 定 行为 紧 
密 相关 。 实 际 上 ，=> 箭头 函数 的 主要 设计 目的 就 是 以 特定 的 方式 改变 this 的 行为 特性 ， 
解决 this 相关 编码 的 一 个 特殊 而 又 常见 的 痛 点 。 
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节省 的 输入 字符 是 一 条 红 鲁 鱼 〈 转 移 注 意 力 的 东西 )， 至 少 是 误导 性 的 。 
让 我 们 回顾 一 下 本 章 前 面 的 另外 一 个 例子 : 

















var controller = { 
makeRequest: function(..){ 
var self = this; 


btn.addEventListener( "click", function(){ 


A a 
self.makeRequest(..); 


}, false ); 
} 
3 
我 们 使 用 了 var self = this 这 一 hack， 然 后 引用 seLf.makeRequest(..)， 因 为 在 我 们 传 
入 addEventListener(..) 的 回调 函数 内 部 ，this 绑 定 和 makeRequest(..) 本 身 的 this 绑 定 
是 不 同 的 。 换 句 话 说， 因为 this 绑 定 是 动态 的 ， 我 们 通过 变量 self 依赖 于 词法 作用 域 的 
可 预测 性 。 











这 里 我 们 终于 可 以 看 到 => 箭头 函数 的 主要 设计 特性 了 。 在 箭头 函数 内 部 ，this 绑 定 不 是 
动态 的 ， 而 是 词法 的 。 在 前 面 的 代码 中 ， 如 果 使 用 箭头 函数 作为 回调 ，this 则 如 我 们 所 愿 
是 可 预测 的 。 


考虑 : 


var controller = { 
makeRequest: function(..){ 
btn.addEventListener( "click", () => { 
//.. 
this.makeRequest(..); 
}, false ); 
} 
}; 
前 面 代码 的 箭头 国 数 回调 中 的 词法 this 现在 与 封装 的 函数 makeRequest(..) 指向 同样 的 
值 。 换 句 话说 ，=> 是 var self = this 的 词法 赫 代 形式 。 


在 通常 需要 var self = this (或 者 换 种 形式 ， 如 国 数 .bind(this) 调用 ) 的 时 候 ， 基 于 
行 原则 相同 ， 可 以 把 => 箭头 函数 作为 一 个 很 好 的 替代 。 看 起 来 不 错 ， 是 吗 ? 


但 没有 这 么 简单 。 























入; 

















假使 用 => 替代 var self = this 或 者 .bind(this) 的 情况 有 所 帮助 ， 那 么 猜 一 下 如 果 在 一 
个 支持 this 的 函数 中 使 用 =>， 而 这 个 函数 不 需要 var self = this 会 怎样 呢 ? 你 可 能 已 经 
猜 到 了 ， 这 会 把 事情 搞 乱 。 没 错 。 











A 
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考虑 : 


var controller = { 
makeRequest: (..) => { 
[fa 
this.helper(..); 


]， 
helper: (..) => { 
J i 
} 
3 


controller.makeRequest(..); 
尽管 我 们 以 controller .makeRequest(..) 的 形式 调用 ，this.helper 引用 还 是 会 失败 ， 因 为 
这 里 的 this 并 不 像 平 常 一 样 指向 controLLer。 那 么 它 指向 哪里 呢 ? 它 是 从 包围 的 作用 域 中 
词法 继承 而 来 的 this。 在 前 面 的 代码 中 也 就 是 全 局 作用 域 ， 其 中 this 指向 那个 全 局 对 象 。 





除了 词法 thts， 箭 头 国 数 还 有 词法 arguments 它们 没有 自己 的 arguments 数组 ， 而 是 
继承 自 父 层 一 一 词法 super 和 new.target 也 是 一 样 (参见 3.4 节 )。 

















所 以 现在 我 们 可 以 给 出 一 组 更 详细 的 => 适用 时 机 的 规则 。 


。 如 果 你 有 一 个 简短 单 句 在 线 函 数 表达 式 ， 其 中 唯一 的 语句 是 return 某 个 计算 出 的 值 ， 
且 这 个 函数 内 部 没有 this 引用 ， 且 没有 自身 引用 (递归 、 事 件 绑 定 / 解 绑 定 ) ， 且 不 会 
要 求 函数 执行 这 些 ， 那 么 可 以 安全 地 把 它 重 构 为 => 箭头 国 数 。 

。 如 果 你 有 一 个 内 层 函 数 表达 式 ， 依 赖 于 在 包含 它 的 函数 中 调用 var self = this hack 或 
者 .bind(this) 来 确保 适当 的 this 绑 定 ， 那 么 这 个 内 层 函 数 表达 式 应 该 可 以 安全 地 转 
换 为 => 箭头 函数 。 

。 如 果 你 的 内 层 函 数 表达 式 依赖 于 封装 函数 中 某 种 像 var args = Array.prototype.slice. 
call(arguments) 来 保证 arguments 的 词法 复制 ， 那 么 这 个 内 层 函 数 应 该 可 以 安全 地 转 
换 为 => 箭头 函数 。 

。 所 有 的 其 他 情况 一 一 函数 声明 、 较 长 的 多 语句 函数 表达 式 、 需 要 词法 名 称 标识 符 (递归 
等 ) 的 函数 ， 以 及 任何 不 符合 以 上 几 点 特征 的 函数 一 一 一 般 都 应 该 避免 => 函数 语法 。 




















底线 : => 是 关于 this、arguments 和 super 的 词法 绑 定 。 这 个 ES6 的 特性 设计 用 来 修正 一 
些 常见 的 问题 ， 而 不 是 bug、 巧 合 或 者 错误 。 
不 要 相信 那些 宣传 所 说 的 => 主要 甚至 绝 大 多 数 关 注 点 在 于 少 打字 。 不 管 是 少 打字 还 是 多 
打字 ， 你 应 该 精确 了 解 自己 输入 的 每 个 字符 的 目的 所 在 。 
如 果 你 有 一 个 函数 ， 出 于 明确 的 原因 其 不 适合 => 箭头 函数 ， 但 是 它 被 声明 
为 对 象 字面 量 的 一 部 分 ， 回 忆 一 下 2.6.2 节 的 内 容 ， 要 使 函数 语法 简洁 还 有 
其 他 可 选 的 方法 。 
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[Ee 











有 用 一 个 可 视 化 的 决策 图 来 展示 如 何 / 为 什么 采用 箭头 函数 : 




















如 何 确 定 是 否 需 要 以 及 如 
何 定义 一 个 ES6 第 头 函 数 ? 
























这 个 参数 并 非 
简单 标识 符 ， 
是 吗 ? 


确定 它 没有 上 默 纵 
"ES 
解构 吗 ? 


你 的 函数 恰好 需 
要 一 个 参数 吗 ? 





这 样 的 形式 对 
你 和 你 的 整个 团队 来 
说 确实 是 直观 
易 懂 的 吗 ? 


你 可 以 省 略 参数 
两 侧 的 ()。 










的 函数 应 该 有 
返回 值 吗 ? 








可 以 省 略 函数 体 前 
后 的 全 。 


对 象 字面 值 需要 一 
对 () 来 包 填 








HH 性 








以 上 所 有 
都 是 完全 清晰 且 显 
而 易 见 的 吗 ? 


恭喜 ! 
去 使 用 箭头 函数 吧 。 
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2.9 for..of 循环 


ES6 在 把 JavaScript 中 我 们 熟悉 的 for 和 for..in 循环 组 合 起 来 的 基础 上 ， 又 新 增 了 一 个 


for. .of 循环 ， 在 和 迭代 器 产生 的 一 系列 值 上 循环 。 








for..of 循环 的 值 必 须 是 一 个 iterable， 或 者 说 它 必须 是 可 以 转换 / 封 箱 到 一 个 iterable 对 象 
的 值 (参见 本 系列 《你 不 知道 的 JavaScript (中 卷 )》 第 一 部 分 )。iterable 就 是 一 个 能 够 产 











生 返 代 颖 供 循环 使 用 的 对 象 。 
我 们 来 对 比 一 下 for..of 和 for..in 以 展示 其 中 的 区 别 : 


var a = [a bc de 


for (var idx in a) { 
console.log( idx ); 


//01234 


for (var val of a) { 
console.log( val ); 


A a bY er md "er 


可 以 看 到 ，for. .in 在 数组 a 的 键 /索引 上 循环 ， 而 for..of 在 a 的 值 上 循环 。 





下 面 是 前 面 代 码 中 的 前 ES6 版 本 的 for. .of 形式 : 


[a sb .Cd er | 
Object.keys( a ); 


7 

















var a 
k 


for (var val, i = 0; i < k.length; i++) { 
val = al k[i] ]; 
console.log( val ); 


} 
LE a bY er "de" 





var a = [a be, "d", "el 


for (var val, ret, it = a[Symbol.iterator](); 
(ret = it.next()) && !ret.done; 


) 


val = ret.value; 
console.log( val ); 


} 
// "a" "b" "c" "d" "e" 











节 ) ， 然 后 反复 调用 这 个 迭代 器 把 它 产生 的 值 赋 给 循环 迭代 变量 。 











在 底层 ，for. .of 循环 向 iterable 请 求 一 个 迭代 器 〈 通 过 内 建 的 Symbol.iterator， 


参见 7.3 
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JavaScript 中 默认 为 (或 提供 ) iterable 的 标准 内 建 值 包括 : 


。 Arrays 

。 Strings 

。 Generators (参见 第 3 章 ) 

。 Collections /TypedArrays ( 参见 第 5 章 ) 


默认 情况 下 平凡 对 象 并 不 适用 for. .of 循环 。 因 为 它们 并 没有 默认 的 迭代 器 ， 
这 是 有 意 设 计 的 特性 ， 而 不 是 错误 。 但 这 里 我 们 不 会 深入 推导 这 一 结论 。 在 
3.1 节 中 ， 我 们 将 会 介绍 如 何 为 自己 的 对 象 定义 进 代 器 ， 这 样 就 可 以 使 for.. 
of 在 任何 对 象 上 循环 ， 得 到 一 组 我 们 定义 的 值 。 




















下 


7 


乍 是 在 原生 字符 串 的 字符 上 检 代 的 方式 : 











for (var c of "hello") { 
console.log( c ); 


// "h" "ev "1l" "1l" "o" 


原生 字符 串 值 "hello" 被 强制 类 型 转换 / 封 箱 到 等 价 的 String 封装 对 象 中 ， 而 这 默认 是 一 


个 iterable。 
在 for (XYZ of ABC).. 中， 和 for 以 及 for..iin 循环 中 的 语句 一 样 ，XYZz 语句 可 以 是 赋值 
表达 式 也 可 以 是 声明 。 所 以 可 以 这 么 做 : 

var 0 = {}; 


for (o.a of [1,2,3]) { 
console.log( o.a ); 


} 
// 123 


for ({x* Oa} of [ {x5 i} {x 2} {Xs 3} -1]) { 


console.log( o.a ); 


} 
// 123 














和 其 他 循环 一 样 ，for. .of 循环 也 可 以 通过 break、continue、return (如 果 在 函数 中 的 
话 ) 提前 终止 ， 并 抛 出 异常 。 在 所 有 这 些 情况 中 ， 如 果 需 要 的 话 ， 都 会 自动 调用 友 代 器 的 
return(..) 函数 (如 果 存 在 的 话 ) 让 迭代 器 执行 清理 工作 。 
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2.10 正则 表达 式 


让 我 们 面 对 这 样 一 个 事实 : JavaScript 中 的 正则 表达 式 很 长 时 间 以 来 基本 没有 什么 变化 。 所 
以 当 ES6 中 终于 增加 了 一 些 新 技巧 ， 真 是 太 好 了 。 这 里 会 概括 介绍 一 下 新 增 的 特性 ， 但 是 全 
面 的 正则 表达 式 主 题 是 很 复杂 的 ， 如 果 想 要 学 习 的 话 需要 阅读 专门 介绍 这 个 主题 的 章节 / 书 
籍 (这 样 的 书籍 有 很 多 ! )。 



































2.10.1 Unicode 标识 

我 们 会 在 2.12 节 详 细 介 绍 这 一 主题 。 这 里 只 是 简单 介绍 ES6+ 正则 表达 式 新 的 u 标 识 ， 这 
个 标识 会 为 表达 式 打 开 Unicode 匹配 。 

JavaScript 字符 串通 常 被 解释 成 16 位 字符 序列 ， 这 些 字符 对 应 基本 多 语言 平面 (Basic 
Multilingual Plane, BMP) (http://en.wikipedia.org/wiki/Plane_%28Unicode %29) 中 的 字符 。 
但 还 有 很 多 UTF-16 字符 在 这 个 范围 之 外 ， 所 以 字符 串 中 还 可 能 包含 这 些 多 字 节 字符 。 














在 ES6 之 前 ， 正 则 表达 式 只 能 基于 PMB 字符 匹配 ， 这 意味 着 那些 扩展 字符 会 被 当 作 两 个 
独立 的 字符 来 匹配 。 通 常 这 不 是 理想 的 做 法 。 

所 以 ， 在 ES6 中 , u 标识 符 表 示 正 则 表达 式 用 Unicode (UTF-16) 字符 来 解释 处 理 字符 串 ， 
把 这 样 的 扩展 字符 当 作 单个 实体 来 匹配 。 


并 不 像 其 名 字 所 上 暗示 的 ,，“UTF-16” 不 完全 是 16 位 的 。 现 代 的 Unicode 使 用 
21 位 来 表示 ， 像 UTF-8、UTF-16 这 样 的 标准 只 是 大 概 表明 了 用 多 少 位 来 表 
示 一 个 字符 。 











举 一 个 例子 (直接 来 自 于 ES6 规范 ) : 音乐 符号 4 (高 音符 号 ) 是 Unicode 码 点 为 U+1D11E 
(0x1D11E), 

















如 果 这 个 符号 出 现在 正则 表达 式 中 (比如 /4/)， 标 准 PMB 解释 在 匹配 的 时 候 会 将 其 解释 
为 两 个 独立 的 字符 (0xD834 和 0xDDI1E)。 而 新 的 ES6 支持 Unicode 模式 ， 意 味 着 14/ 
(或 者 转 义 符 Unicode 形式 /yu{1D11E}/u) 会 把 字符 串 中 的 "4" 作为 一 个 单独 的 匹配 字符 。 


你 可 能 会 问 这 又 有 什么 关系 呢 ? 在 非 Unicode 的 BMP 模式 ， 这 个 模式 会 被 当 作 两 个 独立 
的 字符 ， 但 是 仍然 会 匹配 到 包含 有 "4 "的 字符 串 ， 像 下 面 这 样 试 一 下 就 会 了 解 : 








/8/.test( "@-clef" ); // true 
影响 的 是 匹配 部 分 的 长 度 。 举 例 来 说 : 


/^.-clef/ .test( a A // false 
/^.-clef/u.test( "@®-clef" ); // true 
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模式 中 的 ^.-clef 表明 只 匹配 起 始 处 并 在 普通 文本 "-clef" 之 前 有 一 个 字符 的 情形 。 在 标 
准 的 BMP 模式 中 ， 匹 配 会 失败 (两 个 字符 )， 如 果 用 u 标识 打开 Unicode 模式 ， 匹 配 则 会 
成 功 (单个 字符 )。 


还 有 一 点 需要 注意 ,u 标 识 使 得 + 和 * 这样 的 量词 把 整个 Unicode 码 点 作为 单个 字符 而 
应 用 ， 而 不 仅仅 是 应 用 于 字符 的 低位 (也 就 是 符号 的 最 右 部 分 )。 在 字符 类 内 部 出 现 的 
Unicode 字符 也 是 一 样 ， 比 如 /[ 名- ]/u。 























正则 表达 式 中 的 4 标识 符 行 为 特性 还 有 很 多 重要 的 技术 细节 ， 关 于 这 
些 Mathias Bynens (https://twitter.com/mathias) 在 这 篇 文章 (https:/ 
mathiasbynens.be/notes/es6-unicode-regex) 中 有 详细 的 介绍 。 





2.10.2 ”定点 标识 

ES6 正则 表达 式 中 另外 一 个 新 增 的 标签 模式 是 y， 通 常 称 为 “定点 (sticky) 模式 "。 定 点 
主要 是 指 在 正则 表达 式 的 起 点 有 一 个 虚拟 的 锚 点 ， 只 从 正则 表达 式 的 LastIndex 属性 指定 
的 位 置 开始 匹配 。 





为 了 说 明 这 一 点 ， 我 们 来 考虑 两 个 正则 表达 式 一 一 第 一 个 没有 定点 模式 ， 而 第 二 个 有 : 
var rel = /foo/， 
str = "++foo++"; 
rel.LastIndex; // 0 
rel.test( str ); // true 
rel1.LastIndex; // 9-- 没 有 更 新 
rel.LastIndex = 4; 
rel.test( str ); // true-- 被 忽略 的 LastIndex 
rel.LastIndex; // 4-- 没 有 更 新 


从 上 面 的 代码 中 可 以 观察 到 3 点 。 





。 test(..) 并 不 关心 lastIndex 的 值 ， 总 是 从 输入 字符 串 的 起 始 处 开始 执行 匹配 。 
。 因为 我 们 的 模式 并 没有 起 始 销 点 ^， 对 "foo" 的 搜索 从 整个 字符 串 向 前 寻找 匹配 。 
。 test(..) 不 更 新 LastIndex。 


现在 ， 我 们 试验 一 下 定点 模式 正则 表达 式 : 


var re2 = /foo/y， // <-- 注意 定点 标识 y 
str = "++foo+t+"; 





re2.LastIndex; / 0 
re2.test( str ); // faLse- -0 处 没有 找到 "foo" 
re2.LastIndex; // 0 
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re2.LastIndex = 2; 


re2.test( str ); // true 

re2.LastIndex; // 5- -更 新 到 前 次 匹配 之 后 位 置 
re2.test( str ); // false 

re2.LastIndex; // 0-- 前 次 匹配 失败 后 重 置 








下 面 是 关于 定点 模式 的 新 的 观察 结果 。 


。 test(..) 使 用 LastIndex 作为 str 中 精确 而 且 唯一 的 位 置 录 找 匹配 。 不 会 向 前 移动 去 寻 
找 匹配 一 一 要 么 匹配 位 于 LastIndex 位 置 上 ， 要 么 就 没有 匹配 。 

。 如 果 匹 配 成 功 ，test(..) 会 更 新 LastIndex 指向 紧 跟 匹配 内 容 之 后 的 那个 字符 。 如 果 匹 
配 失 败 ，test(..) 会 把 LastIndex 重 置 回 0。 





























一 般 的 没有 用 “^ 限制 输入 起 始点 匹配 的 非 定点 模式 可 以 自由 地 在 输入 字符 串 中 向 前 移动 寻 
找 匹 配 内 容 。 而 定点 模式 则 限制 了 模式 只 能 从 LastIndex 开始 匹配 。 




















正如 这 一 小 节 开 始 所 提 到 的 ， 另 一 种 理解 思路 是 把 y 看 作 一 个 在 模式 开始 处 的 虚拟 销 点 ， 
限制 模式 (也 就 是 限制 匹配 的 起 点 ) 相对 于 LastIndex 的 位 置 。 





关于 这 个 主题 的 已 有 文献 中 ， 还 有 一 种 思路 是 y 意味 着 一 个 模式 中 的 ^ (起 
点 ) 锚 点 。 这 并 不 精确 ， 后 面 我 们 在 “定点 锚 点 ”一 节 中 会 详细 解释 。 























1. 定点 定位 
因为 y 模式 不 能 向 前 移动 搜索 匹配 ， 所 以 要 把 y 用 于 重复 匹配 ， 就 不 得 不 手动 保证 
LastIndex 指向 正确 的 位 置 ， 这 种 局 限 性 有 点 奇怪 。 





这 里 有 一 个 可 能 的 应 用 场景 : 如 果 确 定 你 关心 的 匹配 总 是 在 某 个 数字 的 整数 倍 位置 上 【〈 例 
如 : 9、10、29 等 )， 就 可 以 构造 一 个 受 限 的 模式 来 匹配 所 关心 的 内 容 ， 然 后 每 次 在 匹配 之 
前 手动 把 LastIndex 设 定 到 这 些 固定 的 位 置 。 








考虑 : 
var re = /f../y, 
str = "foo far fad"; 
str.match( re ); // ["foo"] 


re.LastIndex = 10; 
str.match( re ); /A ae 


re.LastIndex = 20; 
str.match( re ); // ["fad"] 

















但 是 ， 如 果 要 处 理 的 字符 串 并 没有 这 样 格式 化 在 固定 的 位 置 上 ， 每 次 匹配 之 前 都 要 计算 出 
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需要 把 LastIndex 设置 成 什么 值 可 就 不 那么 合理 了 。 


这 里 有 一 个 技术 细 市 可 以 考虑 用 于 解决 这 个 问题 。y 要 求 LastIndex 精确 位 于 每 个 匹配 发 
生 的 位 置 。 但 是 并 没有 严格 要 求 手动 设置 这 个 LastIndex。 

相反 ， 可 以 以 自己 的 方式 构造 一 个 表达 式 ， 让 它 在 主 匹配 之 前 能 够 捕获 从 你 关注 的 内 容 之 
后 ， 恰 好 直到 下 一 次 关注 内 容 之 前 。 





因为 lastIndex 会 设 定 为 匹配 结尾 处 的 下 一 个 字符 ， 所 以 如 果 匹 配 了 直到 这 个 点 的 所 有 东 
西 ，lastIndex 就 总 会 位 于 y 模式 下 次 要 开始 的 正确 位 置 。 


如 果 无 法 预测 输入 字符 串 的 结构 的 模式 ， 那 么 这 个 技术 就 不 合适 ， 可 能 无 法 
应 用 y。 








可 以 应 用 y 模式 在 字符 串 中 执行 重复 匹配 最 适合 的 场景 可 能 就 是 结构 化 的 输入 字符 赴 。 
考虑 : 


var re = /\d+\.\s(.*?)(?:\s|$)/y 
str = "1. foo 2. bar 3. baz"; 


str.match( re ); // [ "1. foo ", "foo" ] 
re.LastIndex; // 7-- 正 确 位置 ! 
str.match( re ); // [ "2. bar ", "bar" ] 
re.LastIndex; // 14- -正确 位 置 ! 
str.match( re ); // ["3. baz", "baz"] 


这 种 方式 可 以 工作 是 因为 我 提前 了 解 了 输入 字符 串 的 结构 :在 想 要 匹配 的 内 容 ("foo" 等 ) 
之 前 总 有 一 个 像 "1. "这样 的 数字 前 缀 ， 然 后 其 后 或 者 是 一 个 空格 ， 或 者 是 字符 串 结尾 
(也 就 是 锚 点 $)。 所 以 我 构造 的 正则 表达 式 在 主 匹配 中 捕获 所 有 这 样 的 结构 ， 然 后 使 用 匹 
配 组 ( )， 这 样 我 真正 关心 的 内 容 就 很 方便 地 被 提取 出 来 了 。 








第 一 次 匹配 ("1，foo") 之 后 ，LastIndex 值 为 7， 这 已 经 是 下 一 个 匹配 "2. bar" 开始 所 需 
的 位 置 了 ， 依 次 继续 。 

















如 果 要 使 用 y 定点 模式 来 重复 匹配 ， 你 将 很 可 能 想 要 寻找 像 我 们 前 面 展 示 的 自动 更 新 
LastIndex 位 置 的 机 会 。 


2. 定点 还 是 全 局 


有 些 读者 可 能 意识 到 ， 也 可 以 用 9g 全 局 匹配 标识 和 exec(..) 方法 来 模拟 这 种 相对 于 
LastIndex 的 匹配 ， 就 像 这 样 : 
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var re = /o+./g， // <-- 注意 g! 


str = "foot book more"; 
re.exec( str ); // ["oot"] 
re.lastIndex; // 4 
re.exec( str ); // ["ook"] 
re.lastIndex; // 9 
re.exec( str ); // ["or"] 
re.LastIndex; // 13 
re.exec( str ); // null-- 没 有 更 多 匹配 ! 
re.lastIndex; // 0-- 现 在 从 头 开 始 ! 








确实 ，g 模式 匹配 加 上 exec(..) 从 LastiIndex 的 当前 值 开始 匹配 ， 同 时 会 在 每 次 匹配 (或 
匹配 失败 后 ) 更 新 LastIndex， 但 是 这 和 y 的 行为 特性 并 不 相同 。 





注意 前 面 的 代码 中 位 于 位 置 6 处 的 "ook"， 会 被 第 二 个 exec(..) 调用 匹配 找到 ， 虽 然 在 那 
个 时 候 ，LastIndex 值 是 4 (来 自 于 上 一 次 匹配 的 结尾 )。 这 是 为 什么 ?因为 就 像 我 前 面 所 
说 ， 非 定点 匹配 可 以 在 匹配 过 程 中 自由 向 前 移动 。 因 为 不 允许 向 前 移动 ， 所 以 定点 模式 表 
达 式 在 这 里 会 匹配 失败 。 











除了 可 能 并 不 需要 的 向 前 移动 匹配 ， 只 用 9g 替代 y 的 另 一 个 缺点 是 9 改变 了 某 些 匹配 方法 
的 行为 特性 ， 比 如 str.match(re)。 





考虑 : 
var re = /o+./g， // <-- 注意 g! 
str = "foot book more"; 
str.match( re ); // ["oot","ook","or"] 


看 到 所 有 的 匹配 是 如 何 立 即 返 回 了 吗 ? 有 时 候 这 不 是 问题 ， 但 有 时 候 它 又 并 非 是 你 想 要 的 。 








通过 使 用 工具 test(..) 和 match(..)，y 定点 标识 带 来 的 是 一 次 一 个 的 向 前 匹配 。 只 是 要 
确保 每 次 匹配 的 时 候 LastIndex 总 是 处 于 正确 的 位 置 上 ! 


3. 锚 定 

前 面 已 经 提醒 过 ， 把 定点 模式 想象 成 就 是 从 ^ 开始 的 模式 是 不 精确 的 。^ 错 点 在 正则 表达 
式 里 有 独特 的 含义 ， 不 会 被 定点 模式 所 改变 。^ 是 一 个 总 是 指向 输入 起 始 处 的 锚 点 ， 和 
LastIndex 完全 没有 任何 关系 。 


除了 一 些 贫 乏 /不 精确 文档 的 原因 ， 实 际 上 在 Firefox 上 的 一 个 老 旧 的 前 ES6 定点 模式 试验 
确实 让 ^ 与 LastIndex 相关 ， 这 也 不 地 地 进一步 加 深 了 误解 ， 所 以 这 样 的 行为 特性 已 经 存 
在 几 年 了 。 
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ES6 选择 不 采取 这 种 实现 方式 。 模 式 中 的 ^ 就 是 表示 也 仅 表示 输入 的 起 始点 。 





因此 ， 像 /^foo/y 这 样 的 模式 总 是 也 只 是 寻找 字符 串 起 始 处 的 "foo" 匹配 ， 但 前 提 是 允许 
在 此 处 匹配 。 如 果 LastIndex 不 是 96， 那么 匹配 就 会 失败 。 考 虑 : 





var re = /^foo/y， 





str = "foo"; 
re.test( str ); // true 
re.test( str ); // false 
re.lastIndex; // 9-- 失 败 后 重 置 
re.LastIndex = 1; 
re.test( str ); // false-- 由 于 定位 而 失败 
re.lastIndex; // 9-- 失 败 后 重 置 








底线 : y 加 上 ^ 再 加 上 LastIndex > 9 是 一 个 不 兼容 的 组 合 ， 总 是 会 导致 匹配 失败 。 


y 不 会 以 任何 形式 改变 ^ 的 含义 ， 而 m 多 行 模式 则 会 ， 也 就 是 说 ,，^ 意味 着 输 
入 起 始 处 或 者 换行 之 后 的 文字 起 始 位 置 。 所 以 ， 如 果 组 合 使 用 y 和 nm 模式 ， 
就 会 发 现 字符 串 中 有 多 个 ^ 匹 配 基准 。 但 是 记 住 : 因为 这 是 y 定点 的 ， 需 要 
确保 每 次 匹配 的 时 候 LastIndex 指向 正确 的 换行 位 置 (可 能 通过 匹配 行 尾 来 
实现 )， 否 则 下 次 匹配 不 会 成 功 。 

















2.10.3 正则 表达 式 flags 
在 ES6 之 前 ， 如 果 想 要 通过 检查 一 个 正则 表达 式 对 象 来 判断 它 应 用 了 那些 标识 ， 需 要 把 它 
从 source 属性 的 内 容 中 解析 出 来 一 一 讽刺 的 是 ， 这 可 能 需要 用 另 一 个 正则 表达 式 ， 就 像 下 
面 这 样 : 

var re = /foo/ig; 

re.tostring(); // "/foo/ig" 

var flags = re.toSstring().match( /\/([gim]*)$/ )[1]; 

flags; // "ig" 
而 在 ES6 中 ， 现 在 可 以 用 新 的 flags 属性 直接 得 到 这 些 值 。 

var re = /foo/ig; 

re.flags; 1/ "gi 


这 里 有 一 点 细节 ，ES6 规范 中 规定 了 表达 式 的 标识 按照 这 个 顺序 列 出 :"gimuy"， 无 论 原始 
指定 的 模式 是 什么 。 这 就 是 /ig 和 "gi" 之 间 区 别 的 原因 。 
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间 定 或 列 出 的 标识 顺序 是 无 关 紧 要 的 。 


ES6 的 另 一 个 调整 是 如 果 把 标识 传 给 已 有 的 正则 表达 式 ，RegExp(..) 构造 器 现在 支持 
flags: 


var rel = /foo*/y; 


rel1.source; // "foo*" 
rel1.flags; // "y" 
var re2 = new RegExp( rel ); 

re2.source; // "foo*" 
re2.flags; yf "YYy" 
var re3 = new RegExp( rel, "ig" ); 

re3.source; // "foo*" 
re3.flags; Bo Bi 


在 ES6 之 前 ，re3 构造 会 抛 出 一 个 错误 ， 但 在 ES6 中 ， 可 以 在 复制 的 时 候 覆 盖 标 识 。 


is I JE 委 
2.11 数字 字面 量 扩展 
在 ES5 之 前 ， 数 字 字 面 量 看 起 来 是 这 样 的 一 一 八进制 形式 并 没有 被 正式 支持 ， 只 作为 扩展 
支持 ， 而 浏览 器 已 经 达成 实质 上 的 一 致 : 


























var dec = 42， 
oct 052， 
hex = 0x2a; 

















虽然 可 以 用 不 同 进 制 形式 指定 数字 ， 但 是 数字 的 数字 值 还 是 保存 的 值 ， 并 且 
默认 的 输出 解释 形式 总 是 十 进 制 。 前 面 代码 中 的 3 种 形式 在 其 中 保存 的 都 是 
值 42。 


























为 了 进一步 展示 952 是 一 个 非 标准 形式 的 扩展 ， 考 虑 : 


Number( "42" ); // 42 
Number( "052" ); /52 
Number( "0x2a" ); // 42 


ES5 仍然 支持 作为 浏览 器 扩展 的 八进制 形式 (包括 这 样 的 不 一 致 )， 除 了 在 严格 模式 下 ， 
是 不 支持 八进制 字面 量 (952) 形式 的 。 采 用 这 个 限制 主要 是 因为 很 多 开发 者 有 这 样 一 种 
(来 自 于 其 他 语言 经 验 的 ) 习惯 ,就 是 看 起 来 无 意 地 在 十 进 制 值 前 加 `9` 用 于 代码 对 齐 ， 
然后 就 会 发 现 已 经 不 小 心 完全 改变 了 这 个 数值 ! 














在 非 十 进 制 数字 字面 量 表示 方面 ，ES6 继续 支持 旧 有 的 修改 / 变 体 。 同 时 现在 有 了 一 个 正 
式 八 进 制 形式 、 一 个 补充 的 十 六 进 制 形式 ， 以 及 一 个 全 新 的 二 进 制 形式 。 由 于 Web 兼容 性 
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的 原因 ， 旧 有 的 八进制 052 形式 在 非 严 格 模式 下 还 是 合法 的 (尽管 没有 指出 )， 但 不 应 该 
再 使 用 这 种 形式 了 。 








下 面 是 新 的 ES6 数字 字面 量 形式 : 














var dec = 42， 
oct = 0052， // 或 者 0052 :( 
hex = 0x2a， // 或 者 0X2a :/ 
bin = 0b101010; // 或 者 0B101010 :/ 


唯一 合法 的 小 数 形式 是 十 进 制 的 。 八 进 制 、 十 六 进 制 和 二 进 制 都 是 整数 形式 。 





这 些 形 式 的 字符 串 表示 都 可 以 强制 类 型 转换 / 变换 成 相应 的 数字 值 : 


Number( "42" ); // 42 
Number( "0052" ); // 42 
Number( "QOx2a" ); // 42 


Number( "0b101010" ); // 42 


尽管 并 非 是 ES6 中 全 新 的 ， 但 有 一 个 不 为 人 知 的 事实 就 是 这 些 形 式 都 可 以 进行 〈 某 种 程度 
的 ) 反 向 转换 : 





var a = 42; 


a.toString(); // "42"-- 也 可 以 用 a.toString( 10 ) 
a.toString( 8 ); /1 -52 

a.toString( 16 ); // "2a" 

a.toString( 2 ); // "101010" 


实际 上 ， 可 以 用 这 种 方式 以 任何 2 到 36 之 间 的 基 表 示 一 个 数字 ， 虽 然 像 2、8、10 和 16 
这 些 标准 基 范 围 之 外 的 表示 法 非常 少见 。 








2.12 _ Unicode 


先 声明 这 一 小 节 并 非 是 对 Unicode 资源 完整 详尽 的 介绍 。 我 将 会 覆盖 ES6 中 你 需要 了 
解 的 关于 Unicdoe 的 变化 ， 但 也 不 会 比 这 更 深入 太 多 了 。 关 于 JavaScript 和 Unicode， 
Mathias Bynens (http://twitter.com/ mathias) 编写 /发 表 了 详尽 害 智 的 介绍 (参考 https:// 
mathiasbynens.be/notes/javascript-unicode 和 http:// fluentconf.com/javascript-html-2015/public/ 
content/ 2015/02/18-javascript-loves-unicode ) 。 


Unicode 字符 范围 从 9x9066 到 9xFFFF， 包 含 可 能 看 到 和 接触 到 的 所 有 (各 种 语言 的 ) 标准 
打印 字符 。 这 组 字符 称 为 基本 多 语言 平面 (Basic Multilingual Plane，BMP)。BMP 甚至 包 
含 了 像 雪 人 这 样 的 有 趣 的 符号 : 辣 (U+2603 ) 。 


在 BMP 集 之 外 还 有 很 多 其 他 扩展 Unicode 字符 ， 范 围 直 到 9x10FFFF。 这 些 符号 通常 是 星 
形 符号 (astral symbol) ， 这 个 名 称 是 指 BMP 之 外 的 字符 的 16 个 平面 (或 者 说 ， 层 次 /分 
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组 ) 的 集合 。 星 形 符号 的 例子 包括 4 U+1D11E) 和 包 U+1F4A9) 这 样 的 符号 。 





在 ES6 之 前 ， 可 以 通过 Unicode 转 义 符 指定 JavaScript 字符 串 为 Unicode 字符 ， 比 如 : 


var Snowman = "\u2603"; 
console.log( snowman ); // "&" 


但 是 ，Unicode 转 义 符 \uXXXX 只 支持 四 个 十 六 进 制 字符 的 形式 ， 所 以 这 种 方法 只 能 表示 
BMP 字符 集 。 要 在 ES6 之 前 用 Unicode 转 义 符 表 示 astral 字符 ， 需 要 使 用 一 个 替代 对 一 一 
简单 说 就 是 连续 两 个 特别 计算 出 来 的 Unicode 转 义 字符 ，JavaScript 解释 器 会 把 它 解 释 为 单 
个 astral 字符 : 














var gclef = "\uD834\uDD1E"; 
console.log( gclef ); // "@" 


而 在 ES6 中 ,现在 有 了 可 以 用 于 作 Unicode 转 义 (在 字符 串 和 正则 表达 式 中 ) 的 新 形式 ， 
称 为 Unicode 码 点 转 义 (code point escaping) : 








var gclef = "\u{1D11E}"; 

console.log( gclef ); // "8" 
你 可 以 看 到 ， 区 别 在 于 转 义 序列 中 出 现 了 { }， 支 持 在 其 中 包含 任意 多 个 十 六 进 制 字 符 。 
因为 最 多 只 需要 六 个 就 可 以 表示 Unicode 中 最 大 的 可 能 码 点 (也 就 是 9x10FFFF)， 所 以 这 
足够 了 。 


2.12.1 支持 Unicode 的 字符 串 运算 
默认 情况 下 ，JavaScript 字符 串 运 算 和 方法 不 能 感知 字符 串 中 的 astral 符号 。 所 以 会 单 儿 
理 每 个 BMP 字符 ， 即 使 是 构成 单个 astral 字符 的 两 半 。 考 虑 : 








su 





var Snowman = "&"; 
snowman. Length; yA 


var gclef = "6"; 
gclef. length; // 2 


那么 如 何 精确 计算 这 样 的 字符 串 的 长 度 呢 ? 在 这 种 情况 下 ， 可 以 使 用 下 面 的 技巧 : 
var gclef = "6"; 


[...gcLef].Length; // 1 
Array.from( gclef ).length; //1 








回忆 本 章 前 面 2.9 节 所 介绍 的 ，ES6 字符 串 有 内 建 的 迭代 器 。 这 个 迭代 器 恰好 是 可 以 识别 
Unicode 的 ， 也 就 是 说 它 能 够 自动 将 astral 符号 作为 单个 值 输出 。 我 们 可 以 利用 这 一 点 ,在 
数组 字面 量 使 用 .….spread 运算 符 ， 创 建 一 个 字符 串 符 号 的 数组 。 然 后 查看 结果 数组 的 长 
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度 。ES6 的 Array.from(..) 所 做 的 事情 基本 上 和 [...xYz] 一 样 ， 我 们 将 在 第 6 章 详细 介绍 
这 个 工具 。 
应 该 注意 ， 与 理论 上 优化 过 的 原生 工具 / 属性 的 做 法 相 比 ， 只 是 为 了 得 到 一 
个 字符 串 的 长 度 就 需要 构造 并 消耗 一 个 偿 代 器 ， 这 种 方法 的 性 能 代价 相对 来 


说 是 非常 昂贵 的 。 








不 幸 的 是 ， 完 整 的 答案 并 没有 那么 简单 直接 。 除 了 替代 字符 对 〈 字 符 串 友 代 器 会 处 理 ) 
还 有 特殊 Unicode 码 点 需要 用 特殊 的 方式 处 理 ， 这 就 更 难 计算 了 。 例 如 ， 有 一 组 码 点 会 修 
改 前 面相 邻 的 字符 ， 被 称 为 组 合 音标 符号 (Combining Diacritical Mark)。 


考虑 这 两 个 字符 串 输 出 : 









































console.log( s1 ); // "é" 
console.log( s2 ); // "é" 


看 起 来 是 一 样 的 ， 但 实际 上 并 非 如 此 ! 下 面 是 创建 s1 和 s2 的 过 程 : 


mh \xE9" 
"e\u0301"; 


Var sl 
S2 


可 能 你 已 经 猜 到 ， 前 面 的 Length 计算 技巧 对 于 s2 并 不 适用 : 





[...s1].Length; // 1 
[...s2].Length; // 2 


那么 应 该 怎么 办 呢 ? 这 种 情况 下 ， 可 以 在 查询 长 度 之 前 使 用 ES6 的 String#normalize(..) 工 
具 (我 们 将 在 第 6 章 进一步 介绍 ) 对 这 个 值 执行 Unicode 规范 化 〈Unicode normalization) : 


var S1 = "\xE9", 

s2 = "e\u0301"; 
s1.normaLize().Length // 1 
s2.normaLize().Length Ve! 
s1 === s2; // false 
s1 === s2.normalize(); // true 


基本 上 说 就 是 ，normalize(..) 接受 像 "e\vu9301" 这 样 的 一 个 序列 ， 然 后 把 它 规范 化 为 
"\xE9"。 其 至 如 果 有 合适 的 Unicode 符号 可 以 合并 的 话 ， 规 范 化 可 以 把 多 个 相 邻 的 组 合 
符号 合并 : 











var S1 = "o\u0302\u0300", 
s2 = sil.normalize(), 
s3 = "0"; 
s1.length; // 3 





A 
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s2.Length; //1 
s3. Length; //1 


S2 .=== S3; // true 
不 幸 的 是 ， 这 里 规范 化 也 并 不 完美 。 如 果 有 多 个 组 合 符号 修改 了 单个 字符 ， 你 可 能 就 无 法 
得 到 期 望 的 长 度 结果 ， 因 为 可 能 并 没有 单个 的 定义 好 的 规范 化 符号 可 以 表示 所 有 这 些 符号 
带 来 的 合并 结果 。 举 例 来 说 ; 











var S1 = "e\u0301\u0330"; 

console.log( s1 ); //"é" 

s1.normaLize().Length // 2 
你 越 是 深入 挖掘 这 个 兔子 洞 ， 就 越 会 意识 到 很 难得 到 一 个 对 “长 度 ” 的 精确 定义 。 我 们 视 
觉 上 看 到 的 这 染 出 来 的 单个 字符 一 一 更 精确 的 叫 法 是 字 素 (grapheme) 一 一 并 不 总 是 与 程 
序 处 理 意义 上 的 单个 “字符 ”严格 对 应 。 





如 果 你 想 了 解 这 个 兔子 洞 到底 有 多 深 ， 参 见 “ 字 素 族 界限 ”算法 (http:// 


www.Unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries Ji 


2.12.2 ”字符 定位 

与 长 度 复杂 性 类 似 ,“ 位 于 位 置 2 处 的 字符 是 什么 ? ”的 精确 含义 又 是 什么 呢 ? 原 生 的 前 
ES6 对 此 的 答案 是 charAt(..)， 但 它 不 支持 astral 字符 的 原子 性 ， 也 不 会 考虑 组 合 符号 的 
因素 。 


考虑 : 

var s1 = "abc\u0301d " ， 

s2 = "ab\u0107d " ， 

s3 = "ab\u{1d49e}d"; 
console.log( s1 ); // "abcd" 
console.log( s2 ); // "abcd" 
console.log( s3 ); // "ab¢d" 
si.charAt( 2 ); ff er” 
s2.charAt( 2 ); J/ "é" 
s3.charAt( 2 ); // "" <-- 不 可 打印 
s3.charAt( 3 ); // "" <-- 不 可 打印 


那么 ES6 是 否 给 出 了 支持 Unicode 版 本 的 charAt(..) 呢 ? 不 幸 的 是 ， 并 没有 。 但 在 编写 本 
部 分 时 ， 已 经 有 一 个 这 样 的 后 ES6 提案 在 考虑 之 中 了 。 
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但 有 了 前 一 小 节 中 介绍 的 内 容 (当然 也 包括 给 出 提醒 的 局 限 性 ! )， 我 们 可 以 给 出 ES6 版 
本 的 回答 : 


var s1 = "abc\u0301d " ， 
s2 = "ab\u0107d " ， 


s3 = "ab\u{1d49e}d"; 
[...si.normalize()][2]; VO kad 
[...s2.normalize()][2]; Ve 
[...s3.normalize()][2]; // "多 " 











记 住 前 面 的 提醒 : 从 性 能 的 角度 看 ， 每 次 想 要 得 到 单个 字符 都 要 构造 并 消 
耗 一 个 迭代 器 是 …… 非 常 不 理想 的 。 我 们 期 待 后 ES6 优化 的 内 建 工 具 尽 
快 出 现 。 











那么 支持 Unicode 的 版 本 工具 charCodeAt(..) 怎么 样 呢 ? ES6 提供 了 codePointAt(..): 





var s1 = "abc\u0301d " ， 
s2 = "ab\u0107d " ， 
s3 = "ab\u{1d49e}d"; 


s1.normaLize().codePointAt( 2 ).toString( 16 ); 
// "107" 


s2.normalize().codePointAt( 2 ).toString( 16 ); 
/1/ "107" 


s3.normaLize().codePointAt( 2 ).toString( 16 ); 
// "1d49e" 


反方 向 呢 ? ES6 中 支持 Unicode 版 本 的 String.fromCharCode(..) 是 String.fromCodePoint(..): 
String.fromCodePoint( 0x107 ); VE es 


String.fromCodePoint( 0x1d49e ); A 


那么 稍 等 ， 能 不 能 组 合 String.fromCodePoint(..) 和 codePointAt(..) 来 获得 支持 Unicode 
的 charAt(..) 的 更 简单 且 更 优 的 方法 呢 ? 是 的 ， 能 ! 


var s1 = "abc\u0301d " ， 
s2 = "ab\u0107d" ， 
s3 = "ab\u{1d49e}d"; 


String.fromCodePoint( si1.normalize().codePointAt( 2 ) ); 
// Se 


String.fromCodePoint( s2.normalize().codePointAt( 2 ) ); 
// en" 
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String.fromCodePoint( s3.normaLize().codePointAt( 2 ) ); 
yd We 


还 有 很 多 字符 串 方法 这 里 没有 介绍 ， 包 括 toUpperCase()、toLowerCase()、substring(..)、 
indexof(..)、sLice(..)， 以 及 几 十 个 其 他 方法 。 这 些 方 法 都 没有 修改 或 增补 以 提供 完整 
的 Unicode 支持 ， 所 以 在 处 理 包 含 astral 符号 的 字符 串 的 时 候 应 该 非常 小 心 一 一 还 是 尽 可 
能 避免 使 用 吧 ! 














也 有 一 些 字符 串 方 法 使 用 了 正则 表达 式 实 现 其 功能 ， 比 如 replace(..) 和 match(..)。 谢 天 
谢 地 ， 正 如 我 们 在 2.10.1 节 中 介绍 的 ，ES6 为 正则 表达 式 提 供 了 Unicode 支持 。 








好 吧 ， 现 在 可 以 了 ! 通过 前 面 介绍 的 各 种 新 增 特 性 可 以 看 出 ，JavaScript 的 Unicode 字符 串 
支持 明显 优 于 前 ES6 版 本 (尽管 还 不 完美 )。 





2.12.3 Unicode 标识 符 名 


Unicode 也 可 以 用 作 标 识 符 名 (变量 、 属 性 等 )。 在 ES6 之 前 ， 可 以 通过 Unicode 转 义 符 实 
现 这 一 点 ， 比 如 ; 





var \u63A9 = 42; 
// 等 价 于 : var 0 = 42; 
而 在 ES6 中 ， 还 可 以 使 用 前 面 解释 过 的 码 点 转 义 符 语法 : 
var \u{2B400} = 42; 
// 等 价 于 : var 加 = 42; 


关于 到 底 支 持 哪些 Unicode 字符 ， 有 一 套 复 杂 的 规则 。 另 外 ， 还 有 一 些 只 允许 出 现在 标识 
符 名 称 中 的 非 首 个 字符 位 置 上 。 


有 关 所 有 这 些 细节 ，Mathias Bynens 写 了 一 篇 很 好 的 文章 (https://mathias 


bynens.be/notes/javascript-identifiers-es6 ) 。 








在 标识 符 名 称 中 使 用 这 些 不 常见 字符 的 原因 是 很 罕见 的 ， 也 只 是 学 术 意义 上 的 。 通 常 最 好 
不 要 编写 依赖 于 这 些 史 涩 特性 的 代码 。 
2.13 符号 


ES6 为 JavaScript 引入 了 一 个 新 的 原生 类 型 : symboL， 这 是 很 久 没 有 发 生 过 的 事情 。 但 是 ， 
和 其 他 原生 类 型 不 一 样 ，symbol 没有 字面 量 形式 。 
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村 


下 是 创建 symbol 的 过 程 : 
var sym = Symbol( "some optional description" ); 
typeof sym; // "symbol" 
以 下 几 点 需要 注意 。 
。 不 能 也 不 应 该 对 SynbotL(..) 使 用 new。 它 并 不 是 一 个 构造 器 ， 也 不 会 创建 一 个 对 象 。 
。 传 给 Symbol(..) 的 参数 是 可 选 的 。 如 果 传 入 了 的 话 ， 应 该 是 一 个 为 这 个 symbol 的 用 途 


给 出 用 户 友好 描述 的 字符 串 。 
。 typeof 的 输出 是 一 个 新 的 值 ("symbol")， 这 是 识别 symbol 的 首选 方法 。 


如 果 提 供 了 描述 的 话 ， 它 只 被 用 作为 这 个 符号 的 字符 串 表 示 : 





sym.toString(); // "Symbol(some optional description)" 


如 同 原生 字符 串 值 不 是 String 的 实例 一 样 ，symbol 也 不 是 Symbol 的 实例 。 如 果 出 于 某 种 
原因 想 要 构造 一 个 symbol 值 的 装 箱 封装 对 象形 式 ， 可 以 使 用 下 面 的 方法 : 








sym instanceof Symbol ; // false 


var sym0bj = Object( sym ); 
sym0bj instanceof Symbol; // true 


sym0bj .vaLueOf() === sym; // true 
这 段 代码 中 的 sym0bj 也 可 以 换 作 sym; 两 种 形式 都 在 所 有 使 用 symbol 的 场 


合适 用 。 需 要 使 用 装 箱 封装 对 象形 式 (sym0bj) 而 不 是 原生 形式 (sym) 的 情 
况 很 少 。 和 针对 其 他 原生 类 型 的 建议 一 样 ， 最 好 使 用 sym 代替 sym0bj。 

















符号 本 身 的 内 部 值 一 一 称 为 它 的 名 称 (name) 一 一 是 不 在 代码 中 出 现 且 无 法 获得 的 。 可 以 
把 这 个 符号 值 想象 为 一 个 自动 生成 的 、( 在 应 用 内 部 ) 唯一 的 字符 串 值 。 





但 如 果 这 个 值 是 隐藏 的 且 无 法 获得 ， 那 么 符号 的 存在 意义 是 什么 呢 ? 





~ 


符号 的 主要 意义 是 创建 一 个 类 ( 似 ) 字符 串 的 不 会 与 其 他 任何 值 冲突 的 值 。 所 以 ， 考 虑 使 
用 一 个 符号 作为 事件 名 的 常量 表示 的 例子 : 





const EVT_LOGIN = Symbol( "event.login" ); 


然后 在 需要 像 "event.1login" 这 样 的 一 般 字符 串 字 面 量 的 地 方 就 可 以 使 用 EVT_LOGIN 了 : 








evthub. listen( EVT_LOGIN, function(data){ 
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/fs 
于 


这 里 的 好 处 是 EVT_LOGIN 持 有 一 个 不 可 能 与 其 他 值 《有 意 或 无 意 ) 重复 的 值 ， 所 以 这 里 分 
发 或 处 理 的 事件 不 会 有 任何 混淆。 























在 底层 ， 前 面 代码 中 的 evthub 工具 很 可 能 在 某 个 用 来 跟踪 事件 处 理 国 数 
的 内 部 对 象 (hash) 中 直接 使 用 EVT_LOGIN 参数 的 符号 值 属 性 / 键 值 。 如 
果 evthub 需要 把 这 个 符号 值 作为 一 个 真正 的 字符 串 使 用 ， 那 么 它 会 需要 用 
String() 或 者 tostring() 进行 显 式 类 型 转换 ， 因 为 不 允许 隐 式 地 把 符号 转换 
为 字符 串 。 




















可 以 在 对 象 中 直接 使 用 符号 作为 属性 名 / 键 值 ， 比 如 用 作 一 个 特殊 的 想 要 作为 隐藏 或 者 元 
属性 的 属性 。 尽 管 通常 会 这 人 么 使 用 ， 但 是 它 实际 上 并 不 是 隐藏 的 或 者 无 法 接触 的 属性 ， 了 
解 这 一 点 很 重要 。 


考虑 一 下 这 个 实现 了 单 例 (singleton) 模式 的 模块 ， 也 就 是 说 ， 它 只 允许 自己 被 创建 一 次 : 








const INSTANCE = Symbol( "instance" ); 

function HappyFace() { 
if (HappyFace[INSTANCE]) return HappyFace[INSTANCE]; 
function smile() { .. } 


return HappyFace[INSTANCE] = { 
smile: smile 


3 
} 


var me = HappyFace(), 
you = HappyFace(); 


me === you; // true 


这 里 的 INSTANCE 符号 值 是 一 个 特殊 的 、 几 乎 隐藏 的 、 类 似 元 属性 的 属性 ， 静 态 保存 在 
HappeyFace() 函数 对 象 中 。 


也 可 以 采用 平凡 的 、 旧 有 的 属性 ， 比 如 _instance， 其 行为 特性 是 相同 的 。 符 号 的 使 用 只 
是 改进 了 元 编程 风格 ， 把 INSTANCE 属性 与 其 他 普通 属性 区 分 开 来 。 








2.13.1 符号 注册 
在 后 几 个 例子 中 使 用 符号 有 几 个 细微 缺点 ，EVT_LOGIN 和 INSTANCE 变量 不 得 不 保存 在 外 层 
作用 域 中 (可 能 甚至 是 全 局 作用 域 )， 或 者 保存 在 某 个 公开 可 用 的 位 置 ， 这 样 所 有 需要 使 
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用 这 些 符号 的 代码 才 都 能 够 访问 它们 。 


要 改进 访问 这 些 符 号 的 代码 的 组 织 形式 ， 可 以 通过 全 局 符号 注册 (global symbol registry) 


创建 这 些 符号 值 。 举 例 来 说 : 





const EVT_LOGIN = SymbolL.for( "event.login" ); 


console.log( EVT_LOGIN ); // Symbol(event. login) 


以 及 


function HappyFace() { 


const INSTANCE = Symbol.for( " 


instance" ); 


if (HappyFace[INSTANCE]) return HappyFace[INSTANCE]; 


//.. 


return HappyFace[INSTANCE] = { .. }; 


} 


Symbol.for(..) 在 全 局 符号 注册 表 中 搜索 ， 来 查看 是 否 有 描述 文字 相同 的 符号 已 经 存在 ， 





如 果 有 的 话 就 返回 它 。 如 果 疫 有 的 话 ， 会 新 建 一 个 并 将 其 返回 。 换 句 话说， 全 局 注册 表 把 


符号 值 本 身 根据 其 描述 文字 作为 单 例 处 理 


但 是 ， 这 也 意味 着 只 要 使 用 的 描述 名 称 
从 注册 表 中 获取 这 个 符号 。 




















o 








匹配 ， 可 以 在 应 用 的 任何 地 方 通过 Symbol .for(..) 





有 具有 讽刺 意义 的 是 ， 基 本 上 符号 的 目的 是 为 了 取代 应 用 中 的 magic 字符 串 (magic string， 
赋予 特殊 意义 的 任意 字符 串 )。 但 在 全 局 符号 注册 表 中 恰恰 是 用 magic 字符 串 值 来 唯一 标 





识 /定位 符号 。 




















为 了 避免 意外 冲突 ， 可 能 需要 符号 描述 唯一 。 一 个 简单 的 实现 方法 是 在 其 中 包含 前 级 /上 


下 文 /名 字 空 间 信 息 。 
例如 ,考虑 下 面 这 个 工具 : 


function extractValues(str) { 





var key = Symbol.for( "extractValues.parse" ) ， 


re = extractValues[key] || 
/[^=8]+?=([^&]+?)(?=8| 
values = [], match; 


while (match = re.exec( str )) 
values.push( match[1] ); 


return values; 


$)/g， 


{ 





大 
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这 里 使 用 了 "extractValues.parse" 这 个 magic 字符 串 值 ， 因 为 注册 表 中 其 他 符号 的 描述 与 
之 冲突 的 可 能 性 不 大 。 








如 果 这 个 工具 的 用 户 想 要 覆盖 解析 正则 表达 式 ， 也 可 以 使 用 符号 注册 : 


extractValues[Symbol.for( "extractValues.parse" )] = 
/..some pattern../g; 


extractVaLues( "..some string.." ); 











符号 注册 为 这 些 值 提供 了 全 局 存储 ， 除 了 这 个 帮助 之 外 ， 这 里 看 到 的 所 有 示例 实际 上 都 可 
以 通过 直接 用 magic 字符 串 "extractValues .parse"， 而 不 是 符号 作为 键 值 来 实现 。 其 改进 
更 多 是 在 元 编程 这 一 层次 上 而 不 是 在 函数 这 一 层 。 























可 以 使 用 已 经 存储 在 注册 中 的 符号 值 寻找 其 底层 存储 的 描述 文本 ( 键 值 )。 比 如 ， 因 为 天 
法 传递 符号 本 身 ， 可 能 需要 向 应 用 的 另外 一 部 分 发 送信 号 告诉 它 如 何在 注册 表 中 定位 这 个 
符号 。 


可 以 使 用 Symbol.keyFor(..) 提取 注册 符号 的 描述 文本 ( 键 值 ) : 








一 











var s = SymbolL.for( "something cool" ); 


var desc = Symbol.keyFor( s ); 
console.log( desc ); // "something cool" 











// 再 次 从 注册 中 取得 符号 
var S2 = SymbolL.for( desc ); 

















S25 6 // true 


2.13.2 ”作为 对 象 属性 的 符号 
如 果 把 符号 用 作对 象 的 属性 / 键 值 ， 那 么 它 会 以 一 种 特殊 的 方式 存储 ， 使 得 这 个 属性 不 出 
现在 对 这 个 对 象 的 一 般 属性 枚 举 中 : 


var oO={ 
foo: 42， 
[ SymboL( "bar" ) ]: "hello world", 
baz: true 


}; 
Object .getOwnPropertyNames( o ); Eto0s baz" 
要 取得 对 象 的 符号 属性 : 


Object.getOwnPropertySymbols( o ); // [ Symbol(bar) ] 
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这 就 很 清楚 地 表明 了 ， 属 性 符号 实际 上 并 不 是 隐藏 或 不 可 访问 的 ， 因 为 总 可 以 通过 
0bject.getOwnPropertySymbols(..) 列表 看 到 它 。 


内 置 符号 
ES6 支持 若干 预先 定义 好 的 内 置 符号 ， 它 们 可 以 暴露 JavaScript 对 象 值 的 各 种 元 特性 。 但 
是 ， 这 些 符 号 并 不 是 像 一 般 设 想 的 那样 注册 在 全 局 符号 表 里 。 


相反 ， 它 们 作为 Symbol 函数 对 象 的 属性 保存 。 比 如 2.9 市 中 介绍 的 Symbol.iterator 值 : 








var a = [1,2,3]; 
a[SymboL.iterator]; // 原生 函数 


规范 使 用 @@ 前 级 记 法 来 指 代 内 置 符 号 ， 最 常用 的 一 些 是 : @@iterator、@@toStringTag、 
@@toPrimitive。 规 范 还 定义 了 一 些 其 他 符号 ,但 是 可 能 没 那 么 常用 。 

















关于 如 何在 元 编程 中 应 用 这 些 内 置 符号 ， 参见 7.3 节 。 





2.14 小结 
ES6 为 JavaScript 增加 了 很 多 新 的 语法 形式 ， 所 以 要 学 的 太 多 了 | 


这 些 新 语法 形式 中 大 多 数 的 设计 目的 都 是 消除 常见 编程 技巧 中 的 痛 点 ， 比 如 为 函数 参数 设 
定 默 认 值 以 及 把 参数 的 “其 余 ” 部 分 收集 到 数组 中 。 解 构 是 一 个 强 有 力 的 工具 ， 用 于 更 精 
确 地 表达 从 数组 和 峻 套 对 象 中 赋值 。 


而 像 => 箭头 函数 这 样 的 特性 看 起 来 似乎 是 为 了 使 代码 更 简洁 的 语法 ， 但 实际 上 它 有 非常 
特别 的 行为 特性 ， 应 该 只 在 适当 的 时 候 使 用 。 








扩展 Unicode 支持 、 新 的 正则 表达 式 技巧 ， 甚 至 新 的 基本 类 型 symbol 都 使 ES6 的 语法 发 展 
的 更 加 完善 。 
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第 3 章 


代码 组 织 














EE 


写 JavaScript 代码 是 一 回 事 ， 而 合理 组 织 代码 则 是 另 一 回 事 。 利 用 通用 模式 来 组 织 和 复 
用 代码 显著 提高 了 代码 的 可 读 性 和 可 理解 性 。 记 住 : 对 于 代码 来 说 ， 和 其 他 开发 者 交流 与 
提供 计算 机 指令 同等 重要 。 


ES6 提供 了 几 个 重要 的 特性 ， 显 着 改进 了 以 下 模式 ， 包 括 和 迭代 器 、 生 成 器 、 模 块 和 类 。 


3.1 和 迭代 器 

迭代 器 (iterator) 是 一 个 结构 化 的 模式 ， 用 于 从 源 以 一 次 一 个 的 方式 提取 数据 。 这 个 模 
式 在 编程 中 已 经 使 用 相当 长 的 一 段 时 间 了 。 从 很 久之 前 开始 ，JavaScript 开发 者 就 已 经 在 
JavaScript 程序 中 自发 地 设计 和 实现 迭代 器 ， 所 以 这 不 是 一 个 全 新 的 主题 。 

ES6 实现 的 是 为 迁 代 器 引入 一 个 隐 式 的 标准 化 接口 。JavasScript 很 多 内 建 的 数据 结构 现在 都 
提供 了 实现 这 个 标准 的 迭代 器 。 为 了 达到 最 大 化 的 互 操作 性 ， 也 可 以 自己 构建 符合 这 个 标 
准 的 选 代 器 。 

选 代 器 是 一 种 有 序 的 、 连 续 的 、 基 于 拉 取 的 用 于 消耗 数据 的 组 织 方式 。 

例如 ， 你 可 以 实现 一 个 工具 ， 在 每 次 请 求 的 时 候 产生 一 个 新 的 唯一 标识 符 。 也 可 以 在 一 个 
固定 列表 上 以 轮 询 的 方式 产生 一 个 无 限 值 序列 。 或 者 也 可 以 把 迭代 器 附着 在 一 个 数据 库 查 
询 结果 上 ， 每 次 迭代 拉 出 一 个 新 行 。 


虽然 在 JavaScript 中 这 样 的 用 法 并 不 常见 ， 但 是 迭代 器 也 可 以 用 于 以 一 次 一 步 的 方式 控制 
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行为 。 将 生成 器 (参见 3.2 节 ) 考虑 在 内 ， 可 以 把 这 一 点 展示 的 非常 清晰 ， 尽 管 不 用 生成 
器 也 完全 可 以 实现 这 一 功能 。 


3.1.1 接口 


在 编写 本 部 分 的 时 候 ，ES6 第 25.1.1.2 节 (https:// people.mozilla.org/~jorendorff/es6-draft. 
html#sec-iterator-interface) 详细 解释 了 Iterator 接口 ， 包 括 如 下 要 求 ， 


Iterator [required] 
next() {method}: 取得 下 一 个 IteratorResult 





有 些 迭 代 器 还 扩展 支持 两 个 可 选 成 员 : 


Iterator [optional] 
return() {method}: 停止 迭代 器 并 返回 IteratorResulLt 
throw() {method}: 报错 并 返回 IteratorResult 








IteratorResult 接口 指定 如 下 : 


IteratorResult 
value {property}: 当前 迭代 值 或 者 最 终 返 回 值 (如 果 undefined 为 可 选 的 ) 
done {property}: 布尔 值 ， 指 示 完 成 状态 


我 把 这 些 接口 称 为 隐 式 的 ， 并 不 是 因为 它们 没有 在 规范 中 显 式 说 明 一 一 它 
们 有 说 明 ! 一 一 而 是 因为 它们 没有 暴露 为 代码 可 以 访问 的 直接 对 象 。 在 ES6 
中 ，JavaScript 不 支持 任何 “接口 ”的 概念 ， 所 以 你 自己 的 代码 符合 规范 只 
是 单纯 的 惯用 法 。 然 而 ， 在 JavaScript 期 望 迭 代 器 的 位 置 (比如 for..of 循 
环 ) 所 提供 的 东西 必须 符合 这 些 接口 ， 否 则 代码 会 失败 。 




















还 有 一 个 Iterable 接口 ， 用 来 表述 必需 能 够 提供 生成 器 的 对 象 : 


Iterable 
@@iterator() {method}: 产生 一 个 Iterator 


回忆 一 下 2.13.2 市 ， 你 会 了 解 到 eeiterator 是 一 个 特殊 的 内 置 符号 ， 表 示 可 以 为 这 个 对 象 
产生 迭代 器 的 方法 。 
IteratorResult 


IteratorResult 接口 指定 了 从 任何 迭代 器 操作 返回 的 值 必须 是 下 面 这 种 形式 的 对 象 : 

















{ vaLue: .. , done: true / false } 
内 置 迭 代 器 总 是 返回 这 种 形式 的 值 ， 当 然 如 果 需 要 的 话 ， 返 回 值 还 可 以 有 更 多 的 属性 。 


是 
例如 ， 自 定义 迭代 器 可 能 在 结果 对 象 上 增加 额外 的 元 数据 (比如 数据 的 来 源 、 获 取 数 据 的 
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时 间 长 度 、 缓 存 过 期 时 长 、 下 次 请 求 的 适当 频率 ， 等 等 )。 


严格 来 说 ， 如 果 不 提 供 value 可 以 被 当 作 是 不 存在 或 者 未 设置 ， 就 像 值 
undefined， 那 么 value 是 可 选 的 。 因 为 访问 res.value 的 时 候 ， 不 管 它 存 
在 且 值 为 undefined， 还 是 根本 不 存在 ， 都 会 产生 undefined， 这 个 属性 的 
存在 /缺席 更 多 的 是 一 个 实现 细节 或 者 优化 技术 (或 者 二 者 兼 有 )， 而 非 功 


能 问题 。 




















3.1.2 next() 迭代 
我 们 来 观察 一 个 数组 ， 这 是 一 个 iterable， 它 产生 的 迭代 器 可 以 消耗 其 自身 值 : 

















var arr = [1,2,3]; 


var it = arr[Symbol.iterator](); 


it.next(); // { value: 1, done: false } 
it.next(); // { value: 2, done: false } 
it.next(); // { value: 3, done: false } 
it.next(); // { value: undefined, done: true } 


每 次 在 这 个 arr 值 上 调用 位 于 Symbol.iterator (参见 第 2 章 和 第 7 章 ) 的 方法 时 ， 都 会 产 
生 一 个 全 新 的 迭代 器 。 多 数 结构 都 是 这 么 实现 的 ， 包 括 所 有 JavaScript 内 置 数据 结构 。 








但 像 事件 队列 销 费 者 这 样 的 结构 可 能 只 产生 一 个 迭代 器 〈 单 例 模式 )。 或 者 某 个 结构 可 能 
在 同一 时 刻 只 允许 唯一 的 迭代 器 ， 要 求 当 前 的 迭代 器 完成 才能 创建 下 一 个 迭代 器 。 








前 面 代码 中 在 提取 值 3 的 时 候 ， 选 代 器 it 不 会 报告 done: true。 必 须 得 再 次 调用 next()， 
越过 数组 结尾 的 值 ， 才 能 得 到 完成 信号 done: true。 虽 然 直 到 本 小 节 的 后 面 才 会 介绍 原 
因 ， 但 这 样 的 设计 决策 通常 被 认为 是 最 佳 实践 。 





要 本 字符 串 值 默 认 也 可 以 迭代 : 
var greeting = "hello world"; 
var it = greeting[Symbol.iterator](); 


it.next(); // { value: "h", done: false } 
it.next(); // { value: "e", done: false } 





严格 来 说 ， 基 本 值 本 身 不 是 iterable， 但 是 感谢 “ 封 箱 ” 技 术 ，"hello world" 
被 强制 转换 /变换 为 String 对 象 封装 形式 ， 而 这 是 一 个 iterable。 参 见 本 系 
列 《 你 不 知道 的 JavaScript (中 卷 )》 第 一 部 分 可 以 获取 更 多 细节 。 
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ES6 中 还 包括 几 个 新 的 称 为 集合 (参见 第 5 章 ) 的 数据 结构 。 这 些 集合 不 仅 本 身 是 
iterable， 还 提供 了 API 方法 来 产生 进 代 器 ， 比 如 ; 














var m = new Map(); 
m.set( "foo", 42 ); 
m.set( { cool: true }, "hello world" ); 


var it1 = m[Symbol.iterator](); 
var it2 = m.entries(); 


it1i.next(); // { value: [ "foo", 42 ], done: false } 
it2.next(); // { value: [ "foo", 42 ], done: false } 





迁 代 器 的 next(..) 方法 可 以 接受 一 个 或 多 个 可 选 参数 。 绝 大 多 数 内 置 迭 代 器 疫 有 利用 这 个 
功能 ， 尽 管 生 成 器 的 友 代 器 肯定 有 (参见 3.2 市 )。 


通用 的 惯例 是 ， 包 括 所 有 内 置 迭代 器 ， 在 已 经 消耗 完毕 的 迭代 器 上 调用 next(..) 不 会 
错 ， 而 只 是 简单 地 继续 返回 结果 { value: undefined, done: true }。 





上 上 








3.1.3 可 选 的 return(..) 和 throw(..) 


多 数 内 置 欠 代 器 都 没有 实现 可 选 的 进 代 器 接口 一 一 return(..) 和 throw(..)。 然 而 ， 在 生 
成 器 的 上 下 文中 它们 肯定 是 有 意义 的 ， 参 见 3.2 市 获取 更 多 信息 。 














return(..) 被 定义 为 向 达 代 器 发 送 一 个 信号 ， 表 明 消 费 者 代码 已 经 完毕 ， 不 会 再 从 其 中 提 
取 任 何 值 。 这 个 信号 可 以 用 于 通知 生产 者 (响应 next(..) 调用 的 迭代 器 ) 执行 可 能 需要 的 
清理 工作 ， 比 如 释放 / 关闭 网 络 、 数 据 库 或 者 文件 句柄 资源 。 


如 果 和 迭代 器 存在 return(..)， 并 且 出 现 了 任何 可 以 自动 被 解释 为 异常 或 者 对 迭代 器 消耗 的 
提前 终止 的 条 件 ， 就 会 自动 调用 return(..)。 你 也 可 以 手动 调用 return(..)。 





























return(..) 就 像 next(..) 一 样 会 返回 一 个 IteratorResuLt 对 象 。 一 般 来 说 ， 发 送 给 
return(..) 的 可 选 值 将 会 在 这 个 IteratorResult 中 作为 value 返回 ， 但 在 一 些微 妙 的 情况 
下 并 非 如 此 。 


























throw(..) 用 于 向 选 代 器 报告 一 个 异常 /错误 ， 和 迭代 器 针对 这 个 信号 的 反应 可 能 不 同 于 针对 
return(..) 意味 着 的 完成 信号 。 和 对 于 return(…) 的 反应 不 一 样 ， 它 并 不 一 定 意味 着 迭代 
器 的 完全 停止 。 








例如 ， 通 过 生成 器 迭代 器 ，throw(..) 实际 上 向 生成 器 的 停 请 执行 上 下 文中 插入 了 一 个 抛 
出 的 异常 ， 这 个 异常 可 以 用 try..catch 捕获 。 未 捕获 的 throw(..) 异常 最 终 会 异常 终止 生 
成 器 友 代 器 。 
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通用 的 惯例 是 ， 友 代 器 不 应 该 在 调用 return(..) 或 者 thrown(..) 之 后 再 产 
生 任 何 值 。 








3.1.4 迭代 器 循环 


我 们 在 2.9 市 已 经 介绍 过 ，ES6 的 for. .of 循环 直接 消耗 一 个 符合 规范 的 iterable。 


如 果 一 个 迭代 器 也 是 一 个 iterable， 那 么 它 可 以 直接 用 于 for..of 循环 。 你 可 以 通过 为 运 代 
器 提供 一 个 Symbol.iterator 方法 简单 返回 这 个 迭代 器 本 身 使 它 成 为 iterable: 














var 让 = { 
// 使 迭代 器 it 成 为 iterable 
[Symbol.iterator]() { return this; }， 
next() { .. }, 

}; 

it[Symbol.iterator]() === it; // true 

现在 可 以 用 for, .of 循环 消耗 这 个 it 选 代 器 ; 
for (var v of it) { 


console.log( v ); 


} 
要 彻底 理解 这 样 的 循环 如 何 工作 ， 可 以 回顾 一 下 第 2 章 for. .of 循环 的 等 价 for 形式 ， 








for (var v, res; (res = it.next()) && !res.done; ) { 
Vv = res.value; 
console.log( v ); 


} 


如 果 认 真 观 察 的 话 ， 可 以 看 到 每 次 迭代 之 前 都 调用 了 it.next()， 然 后 查看 一 下 res.done。 
如 果 res.done 为 true， 表 达 式 求 值 为 false， 迫 代 就 不 会 发 生 。 




















回忆 一 下 ， 前 面 我 们 建议 选 代 器 一 般 不 应 与 最 终 预 期 的 值 一 起 返回 done: true。 现 在 能 明 
白 基 中 的 原因 了 吧 。 





























如 果 迭 代 器 返回 { done: true，value: 42 }，for. .of 循环 会 完全 持 弃 值 42， 那 么 这 个 
值 就 被 委 失 了 。 因 为 这 个 原因 ， 假 定 你 的 进 代 器 可 能 会 通过 for..of 循环 或 者 手动 的 等 价 
for 形式 模式 消耗 ， 那 么 你 应 该 等 返回 所 有 的 相关 迭代 值 之 后 ， 再 返回 done: true 来 标明 


迭代 完毕 。 
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当然 ， 可 以 有 意 地 把 迭代 器 设计 为 在 返回 done: true 的 同时 返回 一 些 相关 
值 。 但 除非 已 经 写 了 文档 表明 这 一 点 ， 以 此 迫使 进 代 器 的 消 费 者 使 用 不 同 的 
选 代 模 式 ， 而 不 是 像 for. .of 或 者 其 等 价 手 动 for 形式 暗示 的 那样 ， 否 则 不 
要 这 么 做 。 











3.1.5” 自 定 义 和 迭代 器 
除了 标准 的 内 置 迭 代 器 ， 你 也 可 以 构造 自己 的 迭代 器 ! 要 使 得 它们 能 够 与 ES6 的 消费 者 工 
具 (比如 ，for. .of 循环 以 及 ... 运算 符 ) 互 操作 ， 所 需要 做 的 就 是 使 其 遵循 适当 的 接口 。 


让 我 们 试 着 构造 一 个 欠 代 器 来 产生 一 个 无 限 斐 波 纳 契 序 列 : 





var Fib = { 
[Symbol.iterator]() { 
var n1 = 1, n2= 1; 


return { 
// 使 迭代 器 成 为 Lterable 
[Symbol.iterator]() { return this; }, 


next() { 
var Ccurrent = n2; 
n2 = nl; 


n1 = ni1 + current; 
return { value: current, done: false }; 


}, 


return(v) { 

console. Log( 
"Fibonacci sequence abandoned." 

); 
return { value: v, done: true }; 

} 

}; 
} 
3 


for (var v of Fib) { 
console.log( v ); 


if (v > 50) break; 


/I/112358 13213455 
// Fibonacci sequence abandoned. 


rd break 条 件 的 话 ， 这 个 for. .of 循环 就 会 无 限 循 环 下 去 ， 
可 能 不 是 你 想 要 的 结果 。 
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调用 Fib[symbol.iterator]() 方法 的 时 候 ， 会 返回 带 有 next() 和 return(.…) 方法 的 迭代 
器 对 象 。 通 过 放 在 闭 包 里 的 变量 nl 和 n2 维护 状态 。 
接 下 来 考虑 一 个 迭代 器 ， 它 的 设计 意图 是 用 来 在 一 系列 (也 就 是 一 个 队列 ) 动作 上 运行 ， 




















var tasks = { 
[Symbol.iterator]() { 
var steps = this.actions.slice(); 


return { 
// 使 迭代 器 成 为 Lterable 
[Symbol.iterator]() { return this; }, 


next(...args) { 
if (steps.length > 0) { 
let res = steps.shift()( ...args ); 
return { value: res, done: false }; 


else { 
return { done: true } 


}, 


return(v) { 
steps.length = 0; 
return { vaLue: v, done: true }; 
} 
}; 
]， 
actions: [] 


}; 


tasks 上 的 迭代 器 走 过 actions 数组 属性 中 找到 的 函数 (如果 有 的 话 )， 然 后 一 次 一 个 执行 
这 些 函 数 ， 把 传 入 next(..) 的 所 有 参数 传 信 ， 将 其 返回 值 在 标准 IteratorResult 对 象 中 

















下 面 是 这 个 tasks 队列 的 一 种 使 用 方式 : 











tasks.actions.push( 

function step1(x){ 
console.log( "step 1:", x ); 
return x * 2; 

]， 

function step2(x,y){ 
console.log( "step 2:", x, y ); 
return x + (y * 2); 

function step3(x,y,z){ 
console.log( "step 3:", x, y, z ); 
return (x * y) + 2; 
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} 
9 


var it = tasks[Symbol.iterator](); 


it.next( 10 ); // step 1: 10 
// { value: 20, done: false } 


it.next( 20, 50 ); // step 2: 20 50 
// { value: 120, done: false } 


it.next( 20, 50, 120 ); // step 3: 20 50 120 
// { value: 1120, done: false } 


it.next(); // { done: true } 





这 种 特定 的 用 法 强调 了 迭代 器 可 以 作为 一 个 模式 来 组 织 功能 ， 而 不 仅仅 是 数据 。 下 一 小 节 
我 们 介绍 生成 器 时 也 可 以 回顾 一 下 这 里 。 


你 甚至 可 以 创造 性 地 定义 一 个 迭代 器 来 表示 单个 数据 上 的 元 操作 。 举 例 来 说 ， 我 们 可 以 为 
数字 定义 一 个 迭代 器 ， 默 认 范围 是 从 9 到 (或 者 对 于 负数 来 说 ， 向 下 到 ) 关注 的 数字 。 


考虑 : 





if (!Number.prototype[Symbol.iterator]) { 
Object.defineProperty( 
Number .prototype， 
Symbol .iterator, 


{ 


writable: true, 
configurable: true, 
enumerable: false, 
value: function iterator(){ 
var i, inc, done = false, top = +this; 





// 正 向 还 是 反 向 迭代 ? 
inc=1* (top<07? -1: 1); 





return { 


// 使 得 迭代 器 本 身 成 为 Lterable! 
[Symbol.iterator](){ return this; }, 


next() { 
if (!done) { 
// 初始 旭 代 总 是 6 
if (i == nuLL){ 
1= 0; 


} 
// 正 向 返 代 
else if (top >= 0) { 
i = Math.min(top,i + inc); 


} 
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// 反 向 返 代 
else { 
i = Math.max(top,i + inc); 


} 
// 本 次 迭代 后 结束 ? 
if (i == top) done = true; 


return { value: i, done: false }; 


else { 
return { done: true }; 


那么 这 种 创造 性 提供 了 哪些 技巧 呢 ? 


for (var i of 3) { 
console.log( i ); 


} 
//0123 
[isis=3]s // [0,-1,-2,-3] 


这 是 一 些 有 趣 的 技巧 ， 尽 管 其 实际 功效 值得 商检 。 但 又 一 次 地 ， 有 人 可 能 会 奇怪 为 什么 
ES6 不 把 这 个 微小 但 可 爱 的 功能 作为 复活 节 彩 和 蛋 提 供 呢 ! 


这 一 点 我 不 能 玻 于 提醒 ， 像 我 在 前 面 代码 中 那样 扩展 原生 原型 需要 格外 小 心 和 清醒， 以 避 
免 隐 患 。 








在 这 个 例子 中 ， 与 其 他 代码 甚至 是 未 来 的 JavaScript 功能 冲突 的 可 能 性 是 微乎其微 的 。 但 
要 清醒 意识 到 这 么 一 丝 的 可 能 性 。 还 要 编写 文档 为 后 来 者 解释 你 的 所 作 所 为 。 





























如 果 你 想 了 解 更 多 细节 ， 在 这 篇 博客 文章 (http://blog.getify.com/iterating-es6- 
numbers/) 里 我 已 经 解释 过 这 种 特殊 技术 。 还 有 这 篇 评论 (http://blog.getify. 
com/iterating-es6-numbers/comment-page-1/#comment-535294) 甚至 建议 为 字 
符 范 围 构造 类 似 的 技巧 。 








3.1.6 和 帮 代 器 消耗 
前 面 已 经 展示 了 如 何 通过 for..of 循环 一 个 接 一 个 地 背 耗 友 代 器 项 目 ， 但 是 还 有 其 他 ES6 
结构 可 以 用 来 消耗 迭代 器 。 
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考虑 一 下 附着 在 这 个 数组 上 的 迭代 器 (尽管 任何 迭代 器 都 有 如 下 性 质 ) : 


var a = [1, 


Spread 运算 符 .. 


2,3,4,5]; 


. 完全 消耗 了 友 代 器 。 芳 虑 ， 


function foo(x,y,z,w,p) { 
console.log( x+y+z+w+p); 


} 


foo( ...a ); // 15 


… 也 可 以 把 一 个 迭代 器 展开 到 一 个 数组 中 : 


Varebr = [0 ed, ]3 


3 


// [9,1,2,3,4,5,6] 


数组 解构 (参见 2.4 节 ) 可 以 部 分 或 完全 (如果 和 rest / gather 运算 符 .…… 配对 使 用 的 话 ) 
消耗 一 个 迭代 器 : 


var 让 = a[Symbol.iterator](); 


var [x,y] = it; 


// 从 it 中 获取 前 两 个 元 素 


Vart [Za 


// 获取 第 三 


w] = it; 


个 元 素 ， 然 后 一 次 取得 其 余 所 有 元 素 








// it 已 经 完全 耗 尽 ?” 是 的 。 


it.next(); 


xX; 
y; 
Z; 
W, 


// { value: undefined, done: true } 


// 1 
// 2 
// 3 
// [4,5] 


3.2 ”生成 器 


所 有 的 函数 都 运行 直到 完毕 ， 对 吗 ? 换 句 话 说 ， 一 旦 一 个 函数 开始 运行 ， 在 它 结束 之 前 不 
会 被 任何 事情 打 断 。 





至 少 对 于 JavaScript 到 目前 为 止 的 整个 历史 来 说 ， 是 这 样 的 。 而 ES6 引入 了 一 个 全 新 的 某 种 
程度 上 说 是 奇异 的 函数 形式 ， 称 为 生成 器 。 生 成 器 可 以 在 执行 当中 暂停 自身 ， 可 以 立即 恢 
复 执行 也 可 以 过 一 段 时 间 之 后 恢复 执行 。 所 以 显然 它 并 不 像 普通 函数 那样 保证 运行 到 完毕 。 


还 有 ， 在 执行 当 














中 的 每 次 暂停 /恢复 循环 都 提供 了 一 个 双向 信息 传递 的 机 会 ， 生 成 器 可 以 


返回 一 个 值 ， 恢 复 它 的 控制 代码 也 可 以 发 回 一 个 值 。 





和 前 一 节 的 迭代 














器 一 样 ， 可 以 从 多 个 角度 理解 生成 器 是 什么 ， 或 者 最 适合 做 什么 。 没 有 单 





A 
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个 正确 答案 ， 我 们 是 试 着 从 几 个 角度 考虑 的 。 


参见 本 系列 《你 不 知道 的 JavaScript (中 卷 )》 第 二 部 分 可 以 获取 关于 生成 器 
的 更 多 信息 ， 也 可 以 参考 第 4 章 同 名 小 节 。 





3.2.1 语法 
通过 以 下 新 语法 声明 生成 器 函数 : 





function *foo() { 
A 
} 





从 功能 上 来 说 ,，* 的 位 置 无 所 谓 。 同 样 的 声明 可 以 写作 : 





function xfoo() { ..} 
function* foo() { .. 

function * foo() { ..} 
function*foo() { ..} 


这 里 的 唯一 区 别 就 是 风格 喜好 。 多 数 其 他 文献 似乎 都 喜爱 function* foo(..){ .. } 这 种 
形式 。 但 我 喜爱 function *foo(..) { .. }， 所 以 后 面 章节 都 会 采用 这 种 形式 。 





我 的 理由 纯粹 就 是 说 教 性 质 的 。 本 部 分 中 ， 当 提 到 生成 器 函数 时 ， 我 都 会 使 用 *foo(..)， 
而 用 foo(..) 来 指 代 普通 函数 。 我 发 现 *foo(..) 与 function *foo(..){ .. } 中 * 的 位 置 
更 加 吻合 。 


还 有 ， 正 如 我 们 在 第 2 章 中 已 经 看 到 的 简洁 方法 ， 在 对 象 字面 量 中 有 一 种 简洁 生成 器 形式 : 








var a={ 
*foo() { .. } 
3 


我 要 说 的 是 ， 有 了 简洁 生成 器 ，*foo() { .. } 比 * foo() { .. } 更 自然 。 所 以 更 进一步 
支持 了 与 *foo() 的 一 致 性 。 


一 致 性 易于 理解 和 学 习 。 
1. 运行 生成 器 
尽管 生成 器 用 * 声明 ,但 执行 起 来 还 和 普通 函数 一 样 : 


foo(); 


你 也 可 以 传递 参数 给 它 ， 就 像 : 
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function *foo(x,y) { 
fas 
} 
foo( 5, 10 ); 
主要 的 区 别 是 ， 执 行 生成 器 ， 比 如 foo(5,10)， 并 不 实际 在 生成 器 中 运行 代码 。 相 反 ， 它 
会 产生 一 个 迭代 器 控制 这 个 生成 器 执行 其 代码 。 


我 们 会 在 3.3.2 节 回 到 这 个 主题 ， 现 在 简单 地 说 就 是 : 

















function *foo() { 
Ls 
} 


var it = foo(); 

















// 要 启动 /继续 *foo()， 调 用 it.next(..) 


2. yield 
生成 器 还 有 一 个 可 以 在 其 中 使 用 的 新 关键 字 ， 用 来 标示 暂停 点 : yield。 考 虑 : 




















function *foo() { 
var x = 10; 
var y = 20; 


yield; 


var Z = XxX+y; 
} 
在 这 个 *foo() 生成 器 中 ， 首 先 执 行 前 两 行 操作 ， 然 后 yield 会 暂停 这 个 生成 器 。 如 果 恢 复 
的 话 ， 恢 复 时 会 运行 *foo() 的 最 后 一 行 。 生 成 器 中 yield 可 以 出 现任 意 多 次 (严格 说 ,或 
者 根本 不 出 现 ! )。 


你 甚至 可 以 把 yield 放 在 循环 中 ， 用 来 表示 一 个 重复 暂停 点 。 实 际 上 ， 一 个 永 不 结束 的 循 
环 就 意味 着 一 个 永 不 结束 的 生成 器 ， 这 是 完全 有 效 的 ， 有 时 候 完全 就 是 你 所 需要 的 。 

















yield 不 只 是 一 个 暂停 点 。 它 是 一 个 表达 式 ， 在 暂停 生成 右 的 时 候 发 出 一 个 值 。 这 里 是 一 
个 生成 器 中 的 while. true 循环， 每 次 欠 代 都 会 yield 出 一 个 新 的 随机 数 : 











function xfoo() { 
while (true) { 
yield Math.random(); 


} 














yield .. 表达 式 不 只 发 送 一 个 值 一 一 没有 值 的 yield 等 价 于 yield undefined 
接收 (也 就 是 被 替换 为 ) 最 终 的 恢复 值 。 考 虑 : 


而 且 还 会 























A 
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function *foo() { 
var x = yield 10; 
console.log( x ); 


} 
这 个 生成 器 首先 在 暂停 自身 的 时 候 yield 出 值 98。 通过 我 们 前 面 给 出 的 it.next(..) 恢复 
生成 器 的 时 候 ， 恢 复 给 定 的 值 (如 果 有 的 话 ) 就 会 替换 / 完成 整个 Yield 19 表达 式 ， 意 味 


着 这 个 值 会 被 赋 给 变量 x。 

















yield.. 表达 式 可 以 出 现在 所 有 普通 表达 式 可 用 的 地 方 。 举 例 来 说 : 


function *foo() { 
var arr = [ yield 1, yield 2, yield 3 ]; 
console.log( arr, yield 4 ); 


} 
这 里 的 *foo() 有 4 个 yield.. 表达 式 。 每 一 个 yield 都 会 导致 这 个 生成 器 暂停 等 待 一 个 恢 
复 值 ， 然 后 把 这 个 恢复 值 用 在 各 种 表达 式 上 下 文中 。 
yield 严格 上 说 不 是 一 个 运算 符 ， 尽 管 像 yield 1 这 样 使 用 它 的 时 候 确实 看 起 来 像 是 运算 
符 。 因 为 yield 可 以 单独 使 用 ， 比 如 var x = yieLd; ， 把 它 当 作 运 算 符 有 时 会 今 人 迷惑 。 
严格 来 说 ，yield.. 和 像 a = 3 这 样 的 赋值 表达 式 有 同样 的 “表达 式 优 先 级 ” 类 似 于 
运算 符 优 先 级 的 概念 。 这 意味 着 yield.. 基本 上 可 以 出 现在 任何 a = 3 合法 出 现 的 位 置 。 

















让 我 们 来 考虑 对 称 的 这 个 例子 : 


var a, b 

a= 3; // 合法 
b=2+a=3; // 不 合法 
b=2+(a= 3); // 合法 
yield 3; // 合法 
a = 2 + yield 3; // 不 合法 
a = 2+ (yield 3); // 合法 


认真 思考 一 下 可 以 理解 ，yield.. 表达 式 和 赋值 表达 式 行为 上 的 类 似 性 有 一 
定 概 念 上 的 合理 性 。 当 一 个 暂停 的 yield 表达 式 恢 复 的 时 候 ， 它 会 被 完成 / 
替代 为 它 的 恢复 值 ， 采 取 的 方式 和 “赋值 ”给 这 个 值 是 一 样 的 。 

















要 点 : 如 果 需 要 yield.. 出 现在 某 个 位 置 ， 而 这 个 位 置 上 像 a = 3 这 样 的 赋值 不 允许 出 现 ， 
那么 就 要 用 ( ) 封装 。 


因为 yield 关键 字 的 优先 级 很 低 ， 几 乎 yield.. 之 后 的 任何 表达 式 都 会 首先 计算 ， 然 后 再 
通过 yield 发送 。 只 有 spread 运算 符 .… 和 喜 号 运算 符 ， 拥有 更 低 的 优先 级 ， 也 就 是 说 它 
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们 会 在 yietLd 已 经 被 求 值 之 后 才 会 被 绑 定 。 


所 以 和 普通 语句 中 的 多 运算 符 一 样 ， 另 外 一 个 可 能 需要 ( ) 的 情况 是 要 覆盖 (提升) yield 
的 低 优先 级 ， 就 像 以 下 这 些 表达 式 的 区 别 一 样 : 





yield 2 + 3; // 等 价 于 yield (2 + 3) 








(yield 2) + 3; 1/ 首先 yield 2， 然 后 + 3 


和 = 赋值 一 样 ，yield 也 是 “ 右 结 合 ” 的 ， 也 就 是 说 多 个 yield 表达 式 连续 出 现 等 价 于 
用 (..) 从 右 向 左 分 组 。 所 以 ，yieLd yield yield 3 会 被 当 作 yield(yield(yield 3))。 像 
((yield) yield) yield 3 这 样 的 “ 左 结合 ”解释 是 无 意义 的 。 


像 对 运算 符 一 样 ， 如 果 yield 与 其 他 运算 符 或 者 多 个 yield 一 起 使 用 ， 通 过 ( .. ) 分 组 来 
说 清 意图 是 好 习惯 ， 即 使 是 在 并 不 严格 需要 的 时 候 。 





























要 想 获取 其 他 关于 运算 符 优 先 级 和 结合 性 的 信息 ， 参 见 本 系列 《你 不 知道 的 
JavaScript (中 卷 )》 第 一 部 分 。 


3. yield* 

* 使 得 一 个 function 声明 成 了 functionx 生成 器 声明 ， 类 似 地 , * 使 得 yield 成 为 了 
yield *， 这 是 一 个 完全 不 同 的 机 制 ， 称 为 yield 委托 (yield delegation) 。 语 法 上 说 ，yietLd 
*,. 行为 方式 与 yield.. 完全 相同 ， 和 我 们 上 一 小 节 讨 论 的 一 样 。 


yield * .. 需要 一 个 iterable; 然后 它 会 调用 这 个 iterable 的 迭代 器 ， 把 自己 的 生成 器 控制 
委托 给 这 个 从 代 器 ， 直 到 其 耗 尽 。 考 虑 : 
function *foo() { 


yield *[1,2,3]; 
} 


和 生成 器 声明 时 的 * 位置 一 样 (前 面 讨论 过 )，* 的 位 置 在 yield * 表达 式 中 
只 是 一 个 风格 问题 ， 可 以 由 你 自由 选择 。 多 数 其 他 文献 采用 yield* ..， 而 
我 喜欢 yteLd *..， 原 因 和 前 面 讨 论 过 的 类 似 。 








值 [1,2,3] 产生 了 一 个 从 代 器 ， 一步 输出 一 个 值 ， 所 以 *foo() 生成 器 会 随 着 消耗 这 些 值 把 
它们 yield 出 来 。 展 示 这 一 特性 的 另 一 个 方法 是 展示 yield 委托 到 另 一 个 生成 器 : 


function *foo() { 
yield 1; 
yield 2; 
yield 3; 

} 
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function *bar() { 
yield xfoo(); 


*bar() 调用 *foo() 的 时 候 产 生 的 迭代 器 
么 值 ， 这 些 值 都 会 被 *bar() 产 出 。 


使 用 yield..， 表 达 式 的 完成 值 来 
*., 表达 式 来 说 ， 完 成 值 来 自 于 被 委托 的 迭代 器 的 返 


通过 yield 

















正如 我 们 在 3.1.4 市 讨论 过 的 ， 内 置 迭代 器 通 
生成 器 





) 的 话 ， 可 以 设计 为 return 一 个 什 











function *foo() { 
yield 1; 
yield 2; 
yield 3; 
return 4; 


function *bar() { 
var x = yield *foo(); 
console.log( "x:", x ); 


} 


for (var v of bar()) { 
console.log( v ); 
































自 于 用 it.next(.. 


* 委托 ， 这 意味 着 不 管 *foo() 产生 什 


) 恢复 生成 器 的 值 ， 而 对 于 yield 
回 值 (如 果 有 的 话 )。 





第 没 有 返回 值 。 而 如 果 自 定义 达 代 器 
,yield *.. 

















(或 者 
可 以 捕获 这 个 值 : 
























































} 
//123 
A 
值 1、2 和 3 从 *foo() 中 yield 出 来 后 再 从 *bar() 中 yield 出来， 然后 从 *foo() 返回 的 值 
4 是 yield *foo() 表达 式 的 完成 值 ， 被 赋 给 了 x。 
因为 yield * 可 以 调用 另外 一 个 生成 器 〈 通 过 委托 到 其 进 代 器 ) ， 所 以 它 也 可 以 通过 调用 自 
身 执行 某 种 生成 器 递归 : 
function *foo(x) { 
if (x < 3) { 
x = yield *foo( x + 1 ); 
} 
return x * 2; 
foo( 1 ); 
foo(1) 以 及 之 后 的 调用 迭代 器 的 next() 来 运行 递归 步骤 的 结果 是 24。 第 一 个 *foo(..) 运 
行 x 值 为 1， 满足 x < 3。x + 1 被 递归 地 传 给 *foo(..)， 所 以 这 一 次 x 为 2。 再 次 的 递归 
调用 使 得 x 值 为 3。 
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出 








岗 在 ， 因 为 不 满足 x < 3， 递 归 停 止 ， 返回 3 * 2 也 就 是 6 给 前 一 个 调用 的 yield *.. 表达 
式 ， 这 个 值 被 赋 给 x。 再 次 返回 6 * 2 的 结果 12 给 前 一 次 调用 的 x。 最 后 是 12 * 2， 也 就 
是 24， 返 回 给 *foo() 生成 器 的 完成 结果 。 




















3.2.2 ”和 迭代 器 控制 


前 面 我 们 简单 介绍 过 生成 器 由 迭代 器 控制 这 个 概念 。 这 里 再 深 入 探讨 一 下 。 














回忆 一 下 前 一 小 节 中 的 递归 *foo(..)。 下 面 是 运行 它 的 方式 : 


function *foo(x) { 
if (x < 3) { 
x = yield *foo( x + 1 ); 
上 
return x * 2; 


} 


var it = foo( 1 ); 
it.next(); // { value: 24, done: true } 


在 上 面 的 例子 中 ， 生 成 器 没有 真正 暂停 ， 因 为 并 没有 yield .. 表达 式 。 相 反 ，yield * 只 


是 通过 递归 调用 保存 当前 的 迭代 步骤 。 所 以 ， 只 要 一 次 调用 返 代 器 的 next() 函数 就 运行 了 
整个 生成 器 。 





现在 ， 让 我 们 来 考虑 一 个 有 多 个 步 又 ， 因 此 有 多 个 产生 值 的 生成 器 : 


function *foo() { 
yield 1; 
yield 2; 
yield 3; 

} 


我 们 已 经 知道 ， 可 以 通过 for. .of 循环 消耗 迭代 器 ， 即 使 是 一 个 附着 在 *foo() 这 样 的 生成 
器 上 的 迭代 器 : 





for (var v of foo()) { 
console.log( v ); 


} 
// 123 


for. .of 循环 需要 一 个 iterable。 生 成 器 函数 引用 (比如 foo) 自己 并 不 是 一 个 
iterable; 需要 通过 foo() 执行 它 才 能 得 到 一 个 迭代 器 (也 是 一 个 iterable， 本 章 
前 面 我 们 已 经 解释 过 )。 理 论 上 说 可 以 为 GeneratorPrototype (所 有 生成 器 函 
数 的 原型 ) 扩展 一 个 主要 就 是 return this() 的 Symbol.iterator 函数 。 这 会 使 
得 foo 引用 本 身 成 为 一 个 iterable， 也 就 是 说 for (var v of foo) { .. } (注意 
foo 上 没有 ()) 可 以 工作 。 
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下 面 让 我 们 来 手动 进 代 这 个 生成 器 : 


7 











function *foo() { 
yield 1; 
yield 2; 
yield 3; 

} 


var it = foo(); 


it.next(); // { value: 1, done: false } 
it.next(); // { value: 2, done: false } 
it.next(); // { value: 3, done: false } 
it.next(); // { value: undefined, done: true } 


如 有 果 仔细 观察 可 以 看 到 ， 其 中 有 3 个 yield 语句 和 4 个 next() 调用 。 这 个 不 匹配 看 起 来 很 
奇 坚 。 实 际 上 ， 假 定 所 有 都 被 计算 ， 生 成 右 完 整 运行 到 结束 ，next() 调用 总 是 会 比 yield 
语句 多 1 个 。 


但 是 如 果 从 相反 的 角度 观察 (由 内 向 外 而 不 是 由 外 向 内 )，yield 和 next() 的 匹配 更 合理 


一 些 





o 





别 忘 了 yield.. 表达 式 用 恢复 生成 器 所 用 的 值 完成 。 这 意味 着 传 给 next(..) 的 参数 完成 了 
当前 yield.. 表达 式 暂 停 等 待 完成 的 。 














我 们 用 以 下 方式 说 明 这 种 思路 : 


function *foo() { 
var Xx = yield 1; 
var y = yield 2; 
var z = yield 3; 
console.log( x, y, z ); 


} 


在 这 段 代码 中 ,每 个 yield.. 从 (1，2，3) 中 发 出 一 个 值 ， 更 直接 地 说 ， 它 是 暂停 生成 器 
来 等 待 一 个 值 。 换 名 话说 几乎 等 价 于 在 问 “ 这 里 我 应 该 用 什么 值 ? 请 回复 。 这 个 问题 。 























下 面 是 我 们 如 何 控制 *foo() 来 启动 它 : 


了 











var it = foo(); 

it.next(); // { value: 1, done: false } 
第 一 个 next() 调用 初始 的 暂停 状态 启动 生成 器 ， 运 行 直 到 第 一 个 yield。 在 调用 第 一 个 
next() 的 时 候 ， 并 没有 yield.. 表达 式 等 待 完成 。 如 果 向 第 一 个 next() 调用 传人 一 个 值 ， 
这 个 值 会 马上 被 丢弃 ， 因 为 并 没有 yield 等 待 接收 这 个 值 。 
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“ES6 之 后 ”的 一 个 早期 提案 会 通过 生成 器 内 部 一 个 独立 的 元 属性 〈 参 考 第 7 
章 ) ， 支 持 访问 传 和 人 最初 next(. .) 调用 的 值 。 


现在 ， 让 我 们 来 回答 当前 这 个 遗留 问题 ， 即 “ 赋 给 x 的 值 应 该 是 什么 ? ”我 们 通过 发 送 一 
个 值 给 下 一 个 next(..) 调用 来 回答 这 个 问题 : 





it.next( "foo" ); // { value: 2, done: false } 
现在 ，x 的 值 就 是 "foo"， 但 我 们 又 提出 了 一 个 新 问题 ， 即 “我 们 要 给 y 赋 什 么 值 ? ”答案 
是 : 

it.next( "bar" ); // { value: 3, done: false } 
给 出 答案 ， 并 提出 一 个 新 间 题 。 最 后 答案 是 : 


it.next( "baz" ); // "foo" "bar" "baz" 
// { value: undefined, done: true } 


现在 应 该 更 清楚 每 个 yield.. 的 “问题 ”是 如 何 由 下 一 个 next(..) 调用 来 回答 了 ， 所 以 我 
们 看 到 的 “额外 的 ”next() 调用 就 是 启动 所 有 这 一 切 的 第 一 个 。 
让 我 们 把 所 有 步骤 集合 到 一 起 : 

var it = foo(); 


// 启动 生成 器 
it.next(); // { value: 1, done: false } 


// 回答 第 一 个 问题 
it.next( "foo" ); // { value: 2, done: false } 


// 回答 第 二 个 问题 
it.next( "bar" ); // { value: 3, done: false } 








// 回答 第 三 个 问题 
it.next( "baz" ); // "foo" "bar" "baz" 
// { value: undefined, done: true } 


你 可 以 把 生成 器 看 作 是 值 的 产生 器 ， 其 中 每 次 迭代 就 是 产生 一 个 值 来 消费 。 


但 是 ， 从 更 通用 的 意义 上 来 说 ， 可 能 更 合理 的 角度 是 把 生成 器 看 作 一 个 受 控 的 、 可 传递 的 
代码 执行 ， 更 像 是 3.1.5 节 中 的 tasks 队列 示例 。 


这 个 角度 就 是 我 们 将 在 第 4 章 中 再 次 讨论 生成 器 的 动机 。 有 具体 来 说 ， 并 不 需 
要 next(..) 在 前 一 个 next(..) 结束 后 再 被 调用 。 在 生成 器 的 内 部 执行 上 下 
文 被 暂停 时 ， 程 序 的 其 余部 分 仍 是 未 被 阻塞 的 ， 包 括 控制 生成 器 恢复 的 异步 
动作 能 

















A 
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3.2.3 ”提前 完成 
本 章 前 面 讨论 过 ， 生 成 器 上 附着 的 迭代 器 支持 可 选 的 return(..) 和 throw(..) 方法。 这 两 
种 方法 都 有 立即 终止 一 个 暂停 的 生成 器 的 效果 。 





























考虑 : 
function *foo() { 
yield 1; 
yield 2; 
yield 3; 


} 


var it = foo(); 


it.next(); // { value: 1, done: false } 
it.return( 42 ); // { value: 42, done: true } 
it.next(); // { value: undefined, done: true } 


return(x) 有 点 像 强制 立即 执行 一 个 return x， 这 样 就 能 够 立即 得 到 指定 值 。 一 旦 生成 器 
完成 ， 或 者 正常 完毕 或 者 像 前 面 展示 的 那样 提前 结束 ， 都 不 会 再 执行 任何 代码 也 不 会 返回 
任何 值 。 














return(..) 除了 可 以 手动 调用 ， 还 可 以 在 每 次 偿 代 的 末尾 被 任何 消耗 从 代 器 的 ES6 构件 自 
动 调用 ， 比 如 for. .of 循环 和 spread 运算 符 .….。 














这 个 功能 的 目的 是 通知 生成 器 如 果 控 制 代码 不 再 在 它 上 面 迭代 ， 那 么 它 可 能 就 会 执行 清理 
任务 (释放 资源 、 重 置 状态 等 )。 和 普通 的 函数 清理 模式 相同 ， 完 成 这 一 点 的 主要 方式 是 
通过 finally 子 句 : 





























function *foo() { 
try { 
yield 1; 
yield 2; 
yield 3; 
} 
finally { 
console.log( "cleanup!" ); 
} 
} 


for (var v of foo()) { 
console.log( v ); 


} 
A ls ke 
// cleanup! 


var it = foo(); 
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it.next(); // { value: 1, done: false } 
it.return( 42 ); // cleanup! 
// { value: 42, done: true } 


不 要 把 yield 语句 放 在 finatty 子 句 内 部 ! 虽然 这 是 有 效 且 合 法 的 ， 但 确 
实 是 一 个 可 怕 的 思路 。 它 会 延 后 你 的 return(..) 调用 的 完成 ， 因 为 任何 在 
finally 子 句 内 部 的 yield.. 表达 式 都 会 被 当 作 是 暂停 并 发 送 消 息 ， 你 不 会 
像 期 望 的 那样 立即 得 到 完成 的 生成 器 。 基 本 上 不 会 有 合理 的 原因 要 实现 这 么 
可 怕 的 思路 ， 所 以 不 要 这 么 用 ! 














除了 前 面 代码 片段 中 展示 的 如 何 通过 return(..) 终止 生成 器 ， 同 时 触发 finatLty 子 句 ， 它 
还 展示 了 生成 器 在 每 次 被 调用 的 时 候 都 产生 了 一 个 全 新 的 迭代 器 。 实 际 上 ， 可 以 同时 把 多 
个 迭代 器 附着 在 同一 个 生成 器 上 : 





function *foo() { 
yield 1; 
yield 2; 
yield 3; 


var it1 = foo(); 
iti.next(); // { value: 1, done: false } 
it1i.next(); // { value: 2, done: false } 


var it2 = foo(); 


it2.next(); // { value: 1, done: false } 

iti.next(); // { value: 3, done: false } 

it2.next(); // { value: 2, done: false } 

it2.next(); // { value: 3, done: false } 

it2.next(); // { value: undefined, done: true } 

it1i.next(); // { value: undefined, done: true } 
提前 终止 


除了 调用 return(..)， 还 可 以 调用 throw(..)。 正 如 return(x) 基本 上 就 是 在 生成 器 中 的 当 
前 暂停 点 插入 了 一 个 return x， 调 用 throw(x) 基本 上 就 相当 于 在 暂停 点 插入 一 个 throw x。 








除了 对 异常 处 理 的 不 同 (我 们 将 在 下 一 小 布 介 绍 对 于 try 语句 这 意味 着 什么 )，throw(..) 
同样 引起 提前 完成 ， 在 当前 暂停 点 终止 生成 器 的 运行 。 举 例 来 说 : 








function *foo() { 
yield 1; 
yield 2; 
yield 3; 

} 





图 灵 社 区 会 员 avilang(1985945885@qq.com) 专 享 尊重 版 权 


var it = foo(); 
it.next(); // { value: 1, done: false } 


try { 
it.throw( "Oops!" ); 


catch (err) { 
console.log( err ); // Exception: Oops! 
} 
it.next(); // { value: undefined, done: true } 
因为 throw(..) 基本 上 就 是 在 生成 器 yield 1 这 一 行 插入 一 个 throw ..， 没 有 处 理 这 个 异 
第 ， 所 以 它 会 立即 传递 回调 用 代码 ， 其 中 通过 try. .catch 处 理 了 这 个 异常 。 


























和 return(..) 不 同 ， 和 迭代 器 的 throw(..) 方 法 从 来 不 会 被 自动 调用 。 


当然 ， 尽 管 没 有 在 前 面 代码 中 展示 ， 如 果 在 调用 throw(..) 的 时 候 有 try. .finally 子 句 在 
生成 器 内 部 等 待 ， 那 么 在 异常 传 回 调用 代码 之 前 finally 子 句 会 有 机 会 运行 。 





























3.2.4 ”错误 处 理 
前 面 我 们 已 经 暗示， 生成 器 的 错误 处 理 可 以 表达 为 try. .catch， 它 可 以 在 由 内 向 外 和 由 外 
向 内 两 个 方向 工作 : 








function *foo() { 
try { 
yield 1; 


catch (err) { 
console.log( err ); 

} 

yield 2; 


throw "Hello!"; 


= 


var it = foo(); 


it.next(); // { value: 1, done: false } 
try { 
it.throw( "Hi!" ); // Hil 


// { value: 2, done: false } 
it.next(); 


console.log( "never gets here" ); 
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catch (err) { 
console.log( err ); // Hello! 


} 
错误 也 可 以 通过 yield * 委托 在 两 个 方向 上 传播 : 


function *foo() { 
try { 
yield 1; 


catch (err) { 
console.log( err ); 


， 
yield 2; 


throw "foo: e2"; 


} 


function *bar() { 
try { 
yield *foo(); 


console.log( "never gets here" ); 
} 
catch (err) { 

console.log( err ); 


} 
} 


var it = bar(); 


try { 
it.next(); // { value: 1, done: false } 
it.throw( "el1" ); // el 
// { value: 2, done: false } 
it.next(); // foo: e2 


// { value: undefined, done: true } 


catch (err) { 
console.log( "never gets here" ); 


} 


it.next(); // { value: undefined, done: true } 





就 像 前 面 我 们 所 看 到 的 ，*foo() 调用 yield 1 的 时 候 , 值 1 通过 *bar() 传递 没有 改变 


但 这 段 代 码 最 有 趣 的 是 ， 当 *foo() 调用 throw "foo: e2" 的 时 候 ， 这 个 错误 传播 到 了 
*bar() 并 立即 被 *bar() 的 try..catch 代码 块 捕获 。 这 个 错误 不 会 像 值 1 一 样 穿 过 *bar()。 

















接着 *bar() 的 catch 执行 一 个 普通 的 输出 err("foo: e2") 然后 *bar() 正常 执行 完毕 ， 这 
也 是 为 什么 从 it.next() 返回 迭代 器 结果 { value: undefined, done: true }。 





本 
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如 果 *bar() 在 yield *.. 表达 式 外 并 没有 包 于 一 个 try. .catch， 那 么 这 个 错误 当然 就 会 一 
路 传播 出 来 ， 在 路 上 还 是 会 完成 (终止) *bar() 的 执行 。 


3.2.5 ”Transpile 生成 器 


可 以 用 ES6 之 前 的 代码 表达 生成 器 功能 吗 ? 答案 是 可 以 ， 并 且 已 经 有 好 几 个 很 棒 的 工具 
实现 了 这 一 点 ， 包 括 最 著名 的 Facebook 的 Regenerator 工具 (https://facebook.github.io/ 


regenerator/) 。 





但 为 了 更 好 地 理解 生成 器 ， 我 们 还 是 试 着 来 手动 转换 一 下 。 总 的 说 来 ， 我 们 将 要 创造 一 个 
简单 的 基于 闭 包 的 状态 机 。 


我 们 的 源 生 成 器 特别 简单 





function *foo() { 
var x = yield 42; 
console.log( x ); 


} 
一 开始 ， 我 们 需要 一 个 名 为 foo() 的 函数 来 执行 ， 它 需要 返回 一 个 迭代 器 : 


function foo() { 
Ls 


return { 
next: function(v) { 


} 
// 省 略 return(..) 和 throw(..) 
} 
现在 ， 需 要 一 些 内 部 变量 来 记录 在 “生成 器 ”逻辑 步骤 内 部 的 当前 位 置 。 我 们 称 之 为 
state。 将 会 有 3 个 状态 : 9 初始 态 、1 等 待 Yetd 表达 式 完成 、2 生成 器 完毕 。 


每 次 调用 next(..)， 我 们 需要 处 理 下 一 个 步骤 ， 然 后 增加 state。 为 了 方便 起 见 ， 我 们 把 
每 个 步骤 放 在 一 个 switch 语句 的 case 子 句 中 ， 并 把 这 些 放 在 内 部 函数 nextstate() 中 ， 
next() 可 以 调用 这 个 函数 。 另 外 ， 因 为 x 是 一 个 跨 这 个 “生成 器 ”整个 作用 域 的 变量 ， 所 
以 它 需要 存活 在 nextState(..) 函数 之 外 。 


下 面 是 所 有 代码 (显然 是 某 种 程度 上 的 简化 ， 以 便 保持 概念 展示 的 清晰 ) : 

















3 








function foo() { 
function nextState(v) { 
switch (state) { 
case 0: 
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State++; 


// yieLd 表 达 式 

return 42; 
case 1: 

State++; 


// yield 表 达 式 完成 
Xe 
console.log( x ); 


// 隐 式 return 
return undefined; 


// 不 需要 处 理 状态 2 





} 
Var state = 0, x; 
return { 

next: function(v) { 


var ret = nextState( v ); 


return { value: ret, done: (state == 2) }; 


} 
// 省 略 return(..) 和 throw(..) 

















}; 
} 


最 后 ， 让 我 们 来 测试 一 下 我 们 的 前 ES6“ 生 成 器 ”: 
var 让 = foo(); 
it.next(); // { value: 42, done: false } 


it.next( 10 ); // 10 
// { value: undefined, done: true } 





还 不 错 吧 ? 希望 这 个 练习 帮 你 巩固 了 生成 器 实际 上 就 是 状态 机 逻辑 的 简化 语法 这 个 概念 。 
这 使 得 它们 应 用 广泛 。 


3.2.6 ”生成 器 使 用 


现在 ,我 们 已 经 更 深入 理解 了 生成 器 的 工作 原理 ， 那 么 它们 适用 于 哪些 场景 昵 ? 
我 们 已 经 看 到 了 两 个 主要 模式 。 





























。 产生 一 系列 值 
这 个 用 法 可 以 很 简单 (比如 随机 字符 串 或 者 递增 数 )， 也 可 以 表示 更 结构 化 的 数据 访问 
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(比如 在 数据 库 查 询 返回 的 行 上 友 代 )。 
不 管 怎样 ， 我 们 使 用 迭代 器 来 控制 生成 器 ， 所 以 可 以 在 每 次 调用 next(.…) 的 时 候 触 发 
某 些 逻辑 。 数 据 结 构 上 的 普通 迭代 器 只 是 取出 值 而 没有 控制 逻辑 。 

















。 顺序 执行 的 任务 队列 
这 种 用 法 通常 表示 算法 中 步 受 的 流 控制 ， 其 中 每 个 步 受 要 求 从 某 个 外 部 源 获得 数据 。 每 
部 分 数据 的 完成 可 以 是 即时 的 ， 也 可 以 是 异步 延迟 的 。 

从 生成 器 内 部 代码 的 角度 来 看 ， 在 yield 点 同步 或 异步 这 样 的 细节 是 完全 透明 的 。 而 
且 ， 这 些 细节 是 故意 被 抽象 出 去 的 ， 这 样 就 不 会 被 诸如 实现 复杂 性 模糊 了 步 卫 的 自然 顺 
序 表 达 。 抽 象 也 意味 着 实现 可 以 在 无 需 修改 生成 器 内 部 代码 的 情况 下 被 替换 / 重 构 。 





通过 这 些 应 用 场景 来 观察 生成 器 时 ， 它 们 就 远 不 止 是 手动 状态 机 的 不 同 或 者 说 更 优雅 的 语 
法 形式 了 。 它 们 是 用 于 控制 组 织 数 据 有 序 产生 和 消耗 的 强 有 力 工具 。 


3.3 ”模块 


在 所 有 JavaScript 代码 中 ， 唯 一 最 重要 的 代码 组 织 模式 是 模块 ， 而 且 一 直 都 是 ， 我 并 不 认为 
这 是 夸大 其 词 。 对 于 我 本 人 ， 我 认为 也 对 于 广泛 社区 来 说 ， 模 块 模式 驱动 了 大 多 数 代码 。 




















3.3.1 上 旧 方 法 
传统 的 模块 模式 基于 一 个 带 有 内 部 变量 和 函数 的 外 层 函 数 ， 以 及 一 个 被 返回 的 “public 
API”， 这 个 “public API” 带 有 对 内 部 数据 和 功能 拥有 闭 包 的 方法 。 通 常 这 样 表 达 : 














function Hello(name) { 
function greeting() { 
console.log( "Hello " + name + "!" ); 


} 


// public API 
return { 
greeting: greeting 
}; 
} 


var me = Hello( "Kyle" ); 
me.greeting(); // Hello Kyle! 


继续 调用 Hello(..) 模块 可 以 产生 多 个 实例 。 有 时 一 个 模块 只 作为 单 例 (singleton， 也 就 
是 说 只 需要 一 个 实例 )， 这 种 情况 下 前 面 的 代码 需要 稍 作 修改 ， 通 常 这 样 使 用 一 个 IIFE: 
var me = (function Hello(name){ 


function greeting() { 
console.log( "Hello " + name + "!" ); 





代码 组 织 | 153 
图 灵 社 区 会 员 avilang(1985945885@qq.com) 专 享 尊重 版 权 


} 
// public API 
return { 
greeting: greeting 
}; 
D(C "Kyle" ); 


me.greeting(); // Hello Kyle! 


这 个 模式 是 经 过 试验 的 。 它 也 足够 灵活 ， 针 对 不 同 场景 有 多 个 变 体 。 














其 中 常用 的 是 异步 模块 定义 (Asynchronous Module Definition，AMD) ， 还 有 一 种 是 通用 模 


块 定 义 (Universal Module Definition，UMD )。 这 里 我 们 不 会 具体 介绍 这 些 模式 和 技术 ， 但 
网 上 有 很 多 详尽 的 解释 。 


3.3.2 ”前进 


对 于 ES6 来 说 ， 我 们 不 再 需要 依赖 于 封装 函数 和 闭 包 提供 模块 支持 。ES6 中 模块 已 经 具备 
一 等 (first class) 语法 和 功能 支持 。 























在 讨论 具体 语法 细节 之 前 ， 有 一 点 很 重要 ， 就 是 要 理解 ES6 模块 和 过 去 我 们 处 理 模 块 的 方 


式 之 间 的 显著 概念 区 别 。 








ES6 使 用 基于 文件 的 模块 ， 也 就 是 说 一 个 文件 一 个 模块 。 目 前 ， 还 设 有 把 多 个 模块 合并 
到 单个 文件 中 的 标准 方法 。 

这 意味 着 如 果 想 要 把 ES6 模块 直接 加 载 到 浏览 器 Web 应 用 中 ， 需 要 分 别 加 载 ， 而 不 是 作 
为 一 大 组 放 在 单个 文件 中 加 载 。 在 过 去 ， 为 了 性 能 优化 ， 后 者 这 种 加 载 方式 是 很 常见 的 。 
期 待 HTTP/2 的 到 来 能 够 显著 消除 所 有 这 样 的 性 能 担忧 ， 因 为 它 运行 在 持久 socket 连接 
上 ， 所 以 能 够 高 效 并 发 、 交 替 加 载 多 个 小 文件 。 

ES6 模 块 的 API 是 静态 的 。 也 就 是 说 ,需要 在 模块 的 公开 API 中 静态 定义 所 有 最 高 层 导 出 ， 
之 后 无 法 补充 。 

某 些 应 用 已 经 习惯 了 提供 动态 API 定义 的 能 力 ， 可 以 根据 对 运行 时 情况 的 响应 增加 / 删 
除 /替换 方法 。 这 些 用 法 或 者 改变 自身 以 适应 ES6 静态 API， 或 者 需要 限制 对 二 级 对 象 
属性 /方法 的 动态 修改 。 

ES6 模块 是 单 例 。 也 就 是 说 ， 模 块 只 有 一 个 实例 ， 其 中 维护 了 它 的 状态 。 每 次 向 其 他 模 
块 导 入 这 个 模块 的 时 候 , 得 到 的 是 对 单个 中 心 实例 的 引用 。 如 果 需 要 产生 多 个 模块 实例 ， 
那么 你 的 模块 需要 提供 某 种 工厂 方法 来 实现 这 一 点 。 

模块 的 公开 API 中 暴露 的 属性 和 方法 并 不 仅仅 是 普通 的 值 或 引用 的 赋值 。 它 们 是 到 内 
部 模块 定义 中 的 标识 符 的 实际 绑 定 〈 儿 乎 类 似 于 指针 ) 。 

在 前 ES6 的 模块 中 ， 如 果 把 一 个 持 有 像 数字 或 者 字符 串 这 样 的 原生 值 的 属性 放 在 公开 
API 中 ， 这 个 属性 赋值 是 通过 值 复 制 赋值 ， 任 何 对 于 对 应 变量 的 内 部 更 新 将 会 是 独立 
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的 ， 不 会 影响 API 对 象 的 公开 复制 。 
对 于 ES6 来 说 ， 导 出 一 个 局 部 私有 变量 ， 即 使 当前 它 持 有 一 个 原生 字符 串 /数字 等 ， 导 
出 的 都 是 到 这 个 变量 的 绑 定 。 如 果 模 块 修改 了 这 个 变量 的 值 ， 外 部 导入 绑 定 现在 会 决议 
到 新 的 值 。 
。 导入 模块 和 静态 请 求 加 载 (如 果 还 没 加 载 的 话 ) 这 个 模块 是 一 样 的 。 如 果 是 在 浏览 器 环 
境 中 ， 这 意味 着 通过 网 络 阻塞 加 载 ， 如 果 是 在 服务 器 上 (比如 Nodejs)， 则 是 从 文件 系 
统 的 阻塞 加 载 。 
但 是 ， 不 要 惊慌 于 这 里 的 性 能 暗示 。 因 为 ES6 模块 具有 静态 定义 ， 导 入 需求 可 以 静态 
扫描 预先 加 载 ， 其 至 是 在 使 用 这 个 模块 之 前 。 
关于 如 何 处 理 这 些 加 载 请 求 ，ES6 并 没有 实际 指定 或 处 理 具体 机 制 。 这 里 有 一 个 独立 的 
模块 加 载 器 (Module Loader) 的 概念 ， 其 中 每 个 宿主 环境 (浏览 器 、Nodejs 等 ) 提供 
一 个 适合 环境 的 默认 加 载 器 。 导 入 模块 时 使 用 一 个 字符 串 值 表 示 去 哪里 获得 这 个 模块 
(URL、 文 件 路 径 等 )， 但 是 这 个 值 对 于 你 的 程序 来 说 是 透明 的 ， 只 对 加 载 器 本 身 有 意义 。 
如 果 需 要 提供 比 默认 加 载 器 更 细 粒 度 的 控制 能 力 可 以 自 定义 加 载 器 ， 默 认 加 载 器 基本 上 
没有 粒度 控制 ， 因 为 它 对 于 你 的 程序 代码 完全 是 不 可 见 的 。 




























































































你 可 以 看 到 ，ES6 模块 将 会 为 代码 组 织 提供 完整 支持 ， 包 括 封装 、 控 制 公开 API 以 及 引用 
依赖 导入 。 但 是 实现 方式 非常 特殊 ， 可 能 可 以 也 可 能 无 法 完全 适应 之 前 多 年 以 来 实现 模块 
的 方式 。 





CommonJS 
还 有 一 个 类 似 、 但 并 不 完全 兼容 的 模块 语法 CommonJS ，Node.js 生态 系统 下 的 开发 者 对 此 
会 很 熟悉 。 





不 得 不 说 ， 长 远 看 来 ，ES6 模块 从 本 质 上 说 必然 会 取代 之 前 所 有 的 模块 格式 和 标准 ， 即 使 
是 CommonJS， 因 为 ES6 模块 是 建立 在 语言 的 语法 支持 基础 上 的 。 最 终 它 总 会 不 可 逆转 地 
作为 统治 方法 成 为 最 后 的 赢家 。 


但 离 那 时 还 有 很 长 的 路 要 走 。 在 服务 器 端 JavaScript 的 世界 里 ， 已 经 有 了 成 百 上 千 的 
Common]JS 风格 模块 ， 以 及 浏览 器 端 十 倍 于 此 的 各 种 格式 标准 的 模块 (UMD、AMD、 临 
时 性 的 模块 方案 )。 要 迁移 这 些 模块 需要 很 多 年 才能 初 见 成 效 。 











在 此 期 间 ， 模 块 transpiler / 转换 工具 是 必 不 可 少 的 。 你 可 能 刚刚 开始 习惯 这 个 新 现实 。 不 
管 你 是 在 编写 普通 模块 、AMD、UMD、Common]JS 还 是 ES6， 这 些 工 具 都 不 得 不 解析 转 
化 为 对 代码 运行 的 所 有 环境 都 适用 的 形式 。 











对 于 Nodejs 来 说 ， 这 可 能 意味 着 (目前 的 ) 目标 是 CommonJS。 对 于 浏览 器 来 说 ， 可 能 
是 UMD 或 者 AMD。 接 下 来 的 几 年 里 ， 随 着 这 些 工具 的 成 熟 和 最 佳 实践 的 涌现 ， 这 一 方 
面 可 能 会 变幻 莫 测 。 
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由 此 ， 关 于 模块 我 的 最 好 建议 是 : 不 管 之 前 你 虔诚 地 支持 和 熟悉 哪 种 格式 ， 现 在 开始 开发 
和 理解 ES6 模块 吧 ， 因 为 它 终 将 会 使 得 其 他 模块 方法 消失 。 它 是 JavaScript 模块 的 未 来 ， 
虽然 现在 有 点 落后 。 


3.3.3 ”新 方法 
支撑 ES6 模块 的 两 个 主要 新 关键 字 是 inport 和 export。 它 们 在 语法 上 有 许多 微妙 之 处 ， 
所 以 我 们 来 深入 了 解 一 下 








这 里 有 一 个 很 容易 被 忽略 的 重要 细节 : import 和 export 都 必须 出 现在 使 用 
它们 的 最 顶层 作用 域 。 举 例 来 说 ， 不 能 把 import 或 export 放 在 if 条件 中 ， 
它们 必须 出 现在 所 有 代码 块 和 函数 的 外 面 。 








导出 API 成 员 
export 关键 字 或 者 是 放 在 声明 的 前 面 ， 或 者 是 作为 一 个 操作 符 (或 类 似 的 ) 与 一 个 要 导出 
的 绑 定 列表 一 起 使 用 。 考 虑 : 


export function foo() { 


//.. 




















} 


export var awesome = 42; 


var bar = [1,2,3]; 
export { bar }; 


看 是 同样 导出 的 另外 一 种 表达 形式 : 


function foo() { 








村 











} 


Var awesome = 42; 
var bar = [1,2,3]; 


export { foo, awesome, bar }; 
这 些 都 称 为 命名 导出 (named export) ， 因 为 导出 变量 / 函数 等 的 名 称 绑 定 。 


没有 用 export 标示 的 一 切 都 在 模块 作用 域内 部 保持 私有 。 也 就 是 说 ， 尽 管 var bar = .. 看 
起 来 像 是 声明 在 全 局 作用 域 的 顶层 ， 而 这 个 顶层 作用 域 实际 上 是 模块 本 身 ， 在 模块 内 没有 全 
局 作用 域 。 























模块 还 能 访问 window 和 所 有 的 “全 局 ”变量 ， 只 是 不 作为 词法 上 的 顶层 作用 
域 。 但 如 果 可 能 的 话 ， 在 你 的 模块 里 应 该 尽量 远离 那些 全 局 量 。 
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在 命名 导出 时 还 可 以 “ 重 命名 ”( 也 即 别名 ) 一 个 模块 成 员 : 








nl 


function foo() { ..} 


export { foo as bar }; 
导入 这 个 模块 的 时 候 ， 只 有 成 员 名 称 bar 可 以 导入 ，foo 还 是 隐藏 在 模块 内 部 。 


模块 导出 不 是 像 你 熟悉 的 赋值 运算 符 = 那样 只 是 值 或 者 引用 的 普通 赋值 。 实 际 上 ， 导 出 的 
是 对 这 些 东 西 (变量 等 ) 的 绑 定 (类似 于 指针 )。 


如 果 在 你 的 模块 内 部 修改 已 经 导出 绑 定 的 变量 的 值 ， 即 使 是 已 经 导入 的 (参见 下 一 小 节 )， 
导入 的 绑 定 也 将 会 决议 到 当前 (更 新 后 ) 的 值 。 


考虑 : 








mh 














ne 























Var awesome = 42; 
export { awesome }; 


// 之 后 


awesome = 100; 





导入 这 个 模块 的 时 候 ， 不 管 是 在 awesome = 199 之 前 还 是 之 后 ， 一 旦 赋值 发 生 ， 导 入 的 绑 
定 就 会 决议 到 169 而 不 是 42。 


这 是 因为 本 质 上 ， 绑 定 是 一 个 指向 awesome 变量 本 身 的 引用 或 者 指针 ， 而 不 是 这 个 值 的 复 
制 。ES6 模块 绑 定 为 JavaScript 带 来 的 这 个 概念 是 前 所 未 有 的 。 


尽管 显然 可 以 在 模块 定义 内 部 多 次 使 用 export， Ce 
export， 称 之 为 默认 导出 (default export) 。TC39 委员 会 的 一 些 成 员 认 为 ， 如 果 遵 循 这 
模式 ， 那 么 “得 到 的 回报 是 更 简单 的 import 语法 ”， 如 果 不 这 么 做 ， 得 到 的 “惩罚 ” 
更 繁复 的 语法 。 
































默认 导出 把 一 个 特定 导出 绑 定 设置 为 导入 模块 时 的 默认 导出 。 绑 定 的 名 称 就 是 default。 
后 面 将 会 看 到 ， 导 入 模块 绑 定 时 可 以 重 命名 ， 因 为 通常 都 会 使 用 默认 导出 。 




















每 个 模块 定义 只 能 有 一 个 default。 下 一 小 市 将 会 介绍 import， 那 时 你 可 以 看 到 如 果 模 块 
有 一 个 默认 导出 ， 它 将 如 何 使 得 import 语法 更 加 简洁 。 
关于 默认 导出 有 一 个 微妙 的 细节 需要 格外 小 心 。 比 较 这 两 段 代 码 : 

function foo(..) { 

//.. 


export default foo; 





代码 组 织 | 157 
图 灵 社 区 会 员 avilang(1985945885@qq.com) 专 享 尊重 版 权 


以 及 

function foo(..) { 

ls 

} 

export { foo as default }; 
在 第 一 段 代 码 中 ， 导 出 的 是 此 时 到 国 数 表达 式 值 的 绑 定 ， 而 不 是 标识 符 foo。 换 句 话 说 ， 
export default .. 接受 的 是 一 个 表达 式 。 如 果 之 后 在 你 的 模块 中 给 foo 赋 一 个 不 同 的 值 ， 
模块 导入 得 到 的 仍然 是 原来 导出 的 函数 ， 而 不 是 新 的 值 。 


顺便 说 一 下 ， 第 一 段 代 码 也 可 以 这 么 写 : 





export default function foo(..) { 


} 


尽管 这 里 的 function foo.. 部 分 严格 说 是 一 个 函数 表达 式 ， 但 由 于 模块 内 部 
作用 域 的 原因 ， 它 被 当 作 函数 声明 对 待 ， 因 为 foo 名 称 和 模块 的 最 高 级 作用 
域 绑 定 (通常 称 为 “hoisting”)。export default class Foo.. 也 是 这 样 。 然 
而 ， 虽 然 你 可 以 export var foo = ..， 但 是 现在 还 不 能 export default var 
foo = .， (或 者 let 或 者 const) ， 这 种 不 一 致 很 令 人 烦恼 。 在 编写 本 部 分 时 ， 
已 经 有 讨论 建议 为 了 一 致 性 尽快 在 后 ES6 时 期 增加 这 个 功能 。 











再 次 回忆 一 下 第 二 段 代码 : 


function foo(..) { 
//.. 
} 


export { foo as default }; 


在 这 个 版 本 的 模块 导出 中 ， 默 认 导出 绑 定 实际 上 绑 定 到 foo 标识 符 而 不 是 它 的 值 ， 所 以 得 
到 了 前 面 描述 的 绑 定 行为 〈 也 就 是 说 ， 如 果 之 后 修改 了 foo 的 值 ， 在 导入 一 侧 看 到 的 值 也 
会 更 新 )。 


要 十 分 小 心 默 认 导 出 语法 的 这 个 微妙 陷 了 尘 ， 特 别 是 在 代码 逻辑 需要 更 新 导出 值 的 时 候 。 如 
果 你 并 不 打算 更 新 默认 导出 的 值 ， 那 么 使 用 export default .. 就 好 。 如 果 确 实 需要 更 新 
这 个 值 ， 就 需要 使 用 export { .. as default }。 不 管 怎 样 ， 记 得 通过 代码 注释 来 解释 你 
































因为 每 个 模块 只 能 有 一 个 defautt， 所 以 你 可 能 会 忍 不 住 把 模块 设计 成 默认 导出 一 个 对 象 ， 
其 中 包含 所 有 的 API 方法 ， 比 如 ; 
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export default { 
foo() { .. }, 
bar() { .. }， 


}3 
这 个 模式 看 起 来 与 大 量 开发 者 已 经 构造 的 前 ES6 模块 紧密 呼应 ， 所 以 似乎 是 一 个 自然 而 然 
的 方法 。 但 不 幸 的 是 ， 它 有 一 些 缺 陷 ， 同 时 也 是 官方 不 建议 采用 的 。 
具体 来 说 ，JavaScript 引擎 无 法 静态 分 析 平 凡 对 象 的 内 容 ， 这 意味 着 它 无 法 对 静态 import 进 
行 性 能 优化 。 让 每 个 成 员 独 立 且 显 式 地 导出 的 优点 是 引擎 可 以 对 其 进行 静态 分 析 和 优化 。 


如 果 你 的 API 已 有 多 个 成 员 ， 这 些 原则 一 一 每 个 模块 一 个 默认 导出 ， 所 有 的 API 成 员 作为 
命名 导出 一 一 看 起 来 似乎 相互 冲突 ， 不 是 吗 ? 但 你 可 以 有 一 个 单独 的 默认 导出 ， 同 时 又 有 
其 他 命名 导出 ;它们 并 不 互 斥 。 











所 以 ， 要 取代 这 个 (不 推荐 的 ) 模式 : 


export default function foo() { ..} 


foo.bar = function() { .. }; 
foo.baz = function() { .. }; 
可 以 用 


export default function foo() { ..} 


export function bar() { .. } 
export function baz() { .. } 


在 前 面 的 代码 中 ， 我 使 用 名 称 foo 作为 default 标识 的 函数 。 然 而 ， 这 个 名 
称 foo 对 于 导出 来 说 是 忽略 的 一 一 实际 上 导出 的 名 字 是 default。 下 一 小 市 
将 会 介绍 ， 在 导入 这 个 默认 绑 定 的 时 候 ， 可 以 任意 地 给 它 起 一 个 名 称 。 














也 有 人 更 喜欢 这 种 形式 : 


function foo() { .. } 
function bar() { ..} 
function baz() { .. } 


export { foo as default, bar, baz, .. }; 
后 面 很 快 会 介绍 import， 到 那 时 混用 默认 和 命名 导出 的 效果 将 会 更 加 清晰 。 但 从 本 质 上 


说 ， 这 意味 着 最 简单 的 默认 导入 形式 只 会 提取 函数 foo()。 如 果 需 要 的 话 ， 用 户 可 以 继续 
手动 列 出 bar 和 baz 作为 命名 导入 。 
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可 以 设想 一 下 ， 如 果 提 供 大 量 命名 导出 绑 定 ， 那 么 对 模块 的 用 户 来 说 将 会 是 多 么 麻烦 。 有 
一 个 通配符 导入 可 以 用 于 把 模块 的 所 有 导出 导入 到 单个 命名 空间 对 象 中 ， 但 无 法 通配符 导 
和 到 顶层 绑 定 。 


再 一 次 重申 ，ES6 模块 机 制 的 设计 意图 是 不 鼓励 模块 大 量 导 出 ， 相 对 而 言 ， 它 是 有 意 想 让 
这 样 的 方法 麻烦 一 些 ， 作 为 某 种 社会 工程 来 提倡 简单 模块 设计 ， 而 不 是 大 型 / 复杂 模块 设 
下 


我 可 能 会 建议 你 避免 混用 默认 导出 和 命名 导出 ， 特 别 是 在 有 大 量 API 并 且 通 过 重 构 拆 分 模 
块 不 实际 或 者 不 想 这 么 做 的 时 候 。 这 种 情况 下 ， 就 都 用 命名 导出 好 了 ， 提 供 文 档 说 明 模 块 
用 户 会 用 import * as .. (名 字 空 间 导 入 ,下 一 小 市 将 会 介绍 ) 方法 来 一 次 把 所 有 API 引 
入 到 某 个 名 字 空 间 中 。 


























前 面 已 经 介绍 过 ,但 这 里 让 我 们 再 详细 讨论 一 下 。 除 了 export default ... 形式 导出 一 个 
表达 式 值 绑 定 ， 所 有 其 他 的 导出 形式 都 是 导出 局 部 标识 符 的 绑 定 。 对 于 这 些 绑 定 来 说 ， 如 
果 导 出 之 后 在 模块 内 部 修改 某 个 值 ， 外 部 导入 的 绑 定 会 访问 到 修改 后 的 值 : 











var foo = 42; 
export { foo as default }; 


export var bar = "hello world"; 
foo = 10; 
bar = "cool"; 


当 你 导入 这 个 模块 的 时 候 ，default 和 bar 导出 会 绑 定 到 局 部 变量 foo 和 bar， 也 就 是 说 
它们 会 暴露 更 新 后 的 值 19 和 "coot"。 导 出 时 刻 的 值 无 关 紧要 。 导 入 时 刻 的 值 也 无 关 紧 要 。 
绑 定 是 活 连 接 ， 所 以 重要 的 是 访问 这 个 绑 定 时 刻 的 当前 值 。 





双向 绑 定 是 不 允许 的 。 如 果 从 一 个 模块 导入 了 foo， 然 后 修改 导入 的 foo 变 
量 的 值 ， 就 会 抛 出 错误 ! 下 一 小 节 我 们 会 再 次 介绍 这 一 点 。 








你 也 可 以 再 次 导出 某 个 模块 的 导出 ， 就 像 这 样 : 











export { foo, bar } from "baz"; 
export { foo as FO0, bar as BAR } from "baz"; 
export * from "baz"; 


这 些 形式 类 似 于 首先 从 "baz" 模块 导入 ， 然 后 显 式 列 出 它 的 成 员 再 从 你 的 模块 导出 。 但 这 些 
形式 中 ，"baz" 模块 的 成 员 不 会 导入 到 你 的 模块 的 局 部 作用 域 ， 它 们 就 像 是 不 留 痕 迹地 罕 过 。 























2. 导入 API 成 员 
不 出 意料 ， 使 用 import 语句 导入 模块 。 就 像 export 有 几 种 变 体 ，import 也 是 一 样 ， 所 以 
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花 点 时 间 思 考 接 下 来 的 问题 ， 并 验证 一 下 你 的 选择 。 
如 果 想 导入 一 个 模块 API 的 某 个 特定 命名 成 员 到 你 的 顶层 作用 域 ， 可 以 使 用 下 面 语法 : 


import { foo, bar, baz } from "foo"; 





这 里 的 { .. } 语 法 可 能 看 起 来 像 是 一 个 对 象 字 面 量 ， 或 者 其 至 是 一 个 对 象 解 
构 语 法 。 但 这 种 形式 是 专用 于 模块 的 ， 所 以 注意 不 要 把 它 和 其 他 { .. } 模式 
混淆 。 














字符 串 "foo" 称 为 模块 指定 符 (module specifier)。 因 为 整体 目标 是 可 静态 分 析 的 语法 ， 模 
块 指定 符 必须 是 字符 串 字 面值 ， 而 不 能 是 持 有 字符 串 值 的 变量 。 


从 ES6 代码 和 JavaScript 引擎 本 身 的 角度 来 说 ， 这 个 字符 串 字面 量 的 内 容 是 完全 透明 的 ， 
也 毫 无 意义 。 模 块 加 载 器 会 把 这 个 字符 串 解释 为 一 个 决定 去 哪儿 寻找 所 需 模 块 的 指令 ， 或 
者 作为 URL 路 径 或 者 是 本 地 文件 系统 路 径 。 

出 的 标识 符 foo、bar 和 baz 必须 匹配 模块 API 的 命名 导出 (会 应 用 静态 分 析 和 错误 判 
定 )。 它 们 会 在 当前 作用 域 绑 定 为 顶层 标识 符 : 























import { foo } from "foo"; 


foo(); 


你 可 以 对 导入 绑 定 标识 符 重 命名 ， 就 像 这 样 





import { foo as theFooFunc } from "foo"; 
theFooFunc(); 


如 有 果 这 个 模块 只 有 一 个 你 想 要 导入 并 绑 定 到 一 个 标识 符 的 默认 导出 ， 绑 定时 可 以 省 略 包 转 
的 { … 上 语法 。 这 种 情况 下 的 import 得 到 了 最 简洁 优美 的 import 语法 形式 : 


import foo from "foo"; 


// 或 者 : 


import { default as foo } from "foo"; 


前 面 一 小 节 介 绍 过 ， 模 块 的 export 中 的 关键 字 default 指定 了 一 个 命名 导 
出 ， 名 称 实际 上 就 是 defautt， ee pe 样 。 
在 后 一 种 语法 中 ， 从 default 到 这 个 例子 中 的 foo 的 重 命名 都 是 显 式 的 ， 和 
前 一 种 隐 式 语法 形式 是 一 样 的 。 




















你 还 可 以 把 默认 导出 与 其 他 命名 导出 一 起 导入 ， 如 有 果 这 个 模块 有 这 样 的 定义 的 话 。 回 忆 前 
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面 这 个 模块 定义 : 
export default function foo() { .. } 


export function bar() { .. } 
export function baz() { .. } 


导入 这 个 模块 的 默认 导出 和 它 的 两 个 命名 导出 : 
import FOOFN, { bar, baz as BAZ } from "foo"; 
FOOFN(); 


bar(); 
BAZ(); 


ES6 模块 哲学 强烈 建议 的 方法 是 ， 只 从 模块 导入 需要 的 具体 绑 定 。 如 有 果 一 个 模块 提供 了 10 个 
API 方 法 ， 但 是 你 只 需要 其 中 的 2 个， 有些 人 坚信 把 所 有 的 API 绑 定 都 导入 进来 是 一 种 浪费 。 


除了 代码 更 清晰 ， 罕 导入 的 另 一 个 好 处 是 使 得 静态 分 析 和 错误 检测 (比如 意外 使 用 了 错误 
的 绑 定名 称 ) 更 加 健壮 。 


当然 ，ES6 设计 哲学 只 影响 了 标准 立场 ， 没 有 任何 强制 要 求 必 须 采 用 这 种 方法 。 


很 多 开发 者 很 快 会 发 现 这 种 方法 可 能 更 繁复 ， 因 为 每 次 意识 到 需要 模块 中 的 新 东西 的 时 
候 ， 都 要 重新 访问 和 更 新 import 语句 。 因 此 这 种 方法 要 权衡 考虑 的 是 便捷 性 。 

考虑 到 这 一 点 ， 理 想 的 选择 是 从 模块 把 所 有 一 切 导入 到 一 个 单独 命名 空间 ， 而 不 是 向 作用 
域 直 接 导 入 独立 的 成 员 。 幸 和 运 的 是 ，import 语句 有 一 种 语法 变 体 可 以 支持 这 种 模块 导入 ， 


称 为 命名 空间 导入 (namespace import) 。 


考虑 一 个 模块 "foo" 导出 ， 如 下 : 




















export function bar() { .. } 
export var x = 42; 
export function baz() { .. } 


你 可 以 把 整个 API 导入 到 单个 模块 命名 空间 绑 定 ; 
import * as foo from "foo"; 
foo.bar(); 


foo.xs // 42 
foo.baz(); 


这 个 * as .. 语句 需要 一 个 * 通配符 。 换 名 话说 ， 不 能 用 import { bar, x } 
as foo from "foo" 这 样 的 语句 只 导入 API 的 一 部 分 但 仍然 绑 定 到 foo 命名 空 
间 。 我 希望 有 这 样 的 支持 ， 但 是 ES6 命名 空间 导入 是 要 么 全 有 要 么 全 无 的 。 











A 
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如 果 通 过 * as .. 导入 的 模块 有 默认 导出 ， 它 在 指定 的 命名 空间 中 的 名 字 就 是 default。 你 
还 可 以 在 这 个 命名 空间 绑 定之 外 把 默认 导入 作为 顶层 标识 符 命 名 。 考 虑 一 个 模块 "wortd" 
导出 ， 如 下 : 

export default function foo() { ..} 


export function bar() { .. } 
export function baz() { .. } 





以 及 下 面 的 导入 : 











import foofn, * as hello from "world"; 


foofn(); 
hello.default(); 
hello.bar(); 
hello.baz(); 


因为 这 个 模块 的 一 个 方法 (默认 导出 ) 绑 定 
其 中 一 个 名 为 default) 绑 定 到 了 另 一 个 (hello) 





虽然 这 个 语法 是 合法 的 ， 但 可 能 会 令 人 迷惑 
到 了 作用 域 的 顶层 ， 而 其 余 的 命名 导出 人 
标识 符 命名 空间 


前 面 已 经 提 到 过 ， 我 建议 避免 这 样 设计 模块 导出 ， 为 的 是 尽量 避免 模块 用 户 被 这 种 奇怪 的 
设计 所 迷惑 。 


























所 有 导入 的 绑 定 都 是 不 可 变 和 /或 只 读 的。 考虑 一 下 前 面 的 导入 ， 导 入 之 后 所 有 这 些 试图 
赋值 的 动作 都 会 抛 出 TypeErrors: 











import foofn, * as hello from "world"; 


foofn = 42; //” (运行 时 ) TypeError! 
hello.default = 42; // (运行 时 ) TypeError! 
hello.bar = 42; // (运行 时 ) TypeError! 
hello.baz = 42; //” (运行 时 ) TypeError! 


回忆 一 下 3.3.3 市 ， 其 中 讨论 了 bar 和 baz 绑 定 是 如 何 绑 定 到 模块 "world" 内 部 的 实际 标 
识 符 上 的 。 这 这 意味 着 如 果 模 块 修改 了 这 些 值 ， hello.bar 和 hello.baz 现在 指向 修改 后 的 
新 值 。 


但 是 你 的 局 部 导入 绑 定 的 不 变性 /只 读 性 限制 了 无 法 从 导入 的 绑 定 修改 它们 ， 否 则 就 会 
TypeErrors。 这 是 非常 重要 的 ， 因 为 如 果 没 有 这 样 的 保护 ， 你 的 修改 就 会 最 终 影响 这 个 模 
块 的 所 有 其 他 用 户 〈 别 忘 了 : 单 例 )， 这 会 导致 出 乎 意料 的 副作用 |! 


另外 ， 尽 管 模块 可 以 从 内 部 修改 API 成员， 但 如 果 需 要 故意 这 样 设计 还 是 要 格外 小 心 。 
ES6 模块 应 该 是 静态 的 ， 所 以 要 尽 可 能 少 地 偏离 这 个 原则 ， 并 且 应 该 用 文档 加 以 认真 详尽 
地 说 明 。 
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有 一 些 设计 哲学 实际 上 想 让 用 户 修改 API 的 某 个 属性 值 ， 或 者 模块 API 被 设 
计 成 是 通过 增加 到 API 命名 空间 的 “插件 ”来 扩展 的 。 前 面 我 们 断言 ，ES6 
模块 API 应 该 被 认为 或 者 被 设计 成 静态 不 可 变 的 ， 这 严格 限制 和 抑制 了 这 些 
另类 的 模块 设计 模式 。 你 可 以 通过 导出 平 几 对 象 来 绕 过 这 些 限制 ， 这 个 对 象 
当然 可 以 修改 。 但 是 要 这 么 做 之 前 一 定 要 三 思 而 后 行 。 
































作为 import 结果 的 声明 是 “提升 的 ”( 参 见 本 系列 《你 不 知道 的 JavaScript (上 卷 )》 第 一 
部 分 )。 考 虑 : 


foo(); 


import { foo } from "foo"; 








foo() 可 以 运行 ， 不 只 是 因为 import … 语句 的 静态 决议 在 编译 过 程 中 确定 了 foo 值 是 什 
么 ， 也 因为 它 “ 提 升 ”了 在 模块 作用 域 顶 层 的 声明 ， 使 它 在 模块 所 有 位 置 可 用 。 











最 后 ，import 最 基本 的 形式 是 这 样 的 : 

import "foo"; 
这 种 形式 并 没有 实际 导入 任 何 一 个 这 个 模块 的 绑 定 到 你 的 作用 域 。 它 加 载 (如 果 还 没有 加 
载 的 话 ) 、 编 译 (如 果 还 没有 编译 的 话 )， 并 求 值 (如 果 还 没有 运行 的 话 ) "foo" 模块 。 


一 般 来 说 ， 这 种 导入 没什么 太 大 用 处 。 可 能 有 一 些 模块 定义 有 副作用 (比如 把 东西 赋 给 
window /全 局 对 象 ) 的 情况 。 你 也 可 以 把 import "foo" 想象 成 是 对 以 后 可 能 需要 的 模块 的 
预 加 载 。 


3.3.4 ”模块 依赖 环 


A 导入 B,B 导入 A。 这 种 情况 到 底 是 怎么 工作 的 ? 



































首先 必需 声明 ， 我 尽量 避免 故意 设计 带 有 环形 依赖 的 系统 。 前 面 已 经 说 过 ， 我 意识 到 有 一 
些 原因 导致 人 们 需要 这 么 做 ， 因 为 它 可 以 解决 某 些 棘手 的 设计 情况 。 

















让 我 们 看 一 下 ES6 是 怎么 处 理 这 个 问题 的 。 首 先 ， 模 块 "A"; 





import bar from "B"; 
export default function foo(x) { 
if (x > 10) return bar( x - 1 ); 


return x * 2; 


} 
然后 ， 模 块 "B": 


import foo from "A"; 
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export default function bar(y) { 
if (y > 5) return foo( y / 2 ); 
return y * 3; 

















foo(..) 和 bar(..) 这 两 个 函数 如 果 在 同一 个 作用 域 的 话 ， 将 会 作为 标准 函数 声明 ， 因 为 这 
两 个 声明 是 “提升 ”到 整个 作用 域 的 ， 所 以 不 管 代码 顺序 如 何 都 可 以 访问 彼此 。 








有 了 模块 ， 那 么 声明 就 是 在 完全 不 同 的 作用 域 ， 所 以 ES6 需要 额外 的 工作 来 支持 这 样 的 循 
环 引 用 。 








下 面 是 从 粗略 概念 的 意义 上 循环 的 import 依赖 如 何 生 效 和 解析 的 过 程 。 


。 如 果 先 加 载 模块 "A"， 第 一 步 是 扫描 这 个 文件 分 析 所 有 的 导出 ， 这 样 就 可 以 注册 所 有 可 
以 导入 的 绑 定 。 然 后 处 理 import .. from "B"， 这 表示 它 需 要 取得 "B"。 

。 引擎 加 载 "8" 之 后 ， 会 对 它 的 导出 绑 定 进行 同样 的 分 析 。 当 看 到 import .. from "A"， 
它 已 经 了 解 "A" 的 API， 所 以 可 以 验证 import 是 否 有 效 。 现 在 它 了 解 "B" 的 API， 就 可 
以 验证 等 待 的 "A" 模块 中 import .. from "B" 的 有 效 性 。 
































本 质 上 说 ， 相 互 导入 ， 加 上 检验 两 个 import 语句 的 有 效 性 的 静态 验证 ， 虚 拟 组 合 了 两 个 独 
立 的 模块 空间 〈 通 过 绑 定 )， 这 样 foo(..) 可 以 调用 bar(..)， 反 过 来 也 是 一 样 。 这 和 如 果 
它们 本 来 是 声明 在 同一 个 作用 域 中 是 对 称 的 。 


现在 让 我 们 试 着 来 使 用 这 两 个 模块 。 首 先 ， 试 一 下 foo(..): 





import foo from "foo"; 
foo( 25 ); // 11 


也 可 以 使 用 bar(..): 


import bar from "bar"; 
bar( 25 ); // 11.5 


在 foo(25) 或 bar(25) 调用 执行 的 时 候 ， 所 有 模块 的 所 有 分 析 / 编译 都 已 经 完成 。 这 意味 
着 foo(..) 内 部 已 经 直接 了 解 bar(..)， 而 bar(..) 内 部 也 已 经 直接 了 解 foo(..)。 














果 只 是 需要 与 foo(..) 交互 ， 那 么 只 需要 导入 "foo" 模块 。 对 于 bar(..) 和 "bar" 模块 也 





当然 ， 需 要 的 话 可 以 导入 并 使 用 二 者 : 





import foo from "foo"; 
import bar from "bar"; 


foo( 25 ); /4 
bar( 25 ); // 11.5 
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import 语句 的 静态 加 载 语义 意味 着 可 以 确保 通过 import 相互 依赖 的 "foo" 和 "bar" 在 其 中 
任何 一 个 运行 之 前 ， 二 者 都 会 被 加 载 、 解 析 和 编译 。 所 以 它们 的 环 依赖 是 静态 决议 的 ， 就 
像 期 望 的 一 样 。 


3.3.5 ”模块 加 载 

我 们 在 3.3 节 开 始 部 分 介绍 过 ，import 语句 使 用 外 部 环境 (浏览 器 、Node.js 等 ) 提供 的 独 
立 机 制 ， 来 实际 把 模块 标识 符 字 符 串 解析 成 可 用 的 指令 ， 用 于 寻找 和 加 载 所 需 的 模块 。 这 
个 机 制 就 是 系统 模块 加 载 器 。 

如 果 在 浏览 器 中 ， 环 境 提供 的 默认 模块 加 载 器 会 把 模块 标识 符 解 析 为 URL，( 一 般 来 说 ) 
如 果 在 像 Node.js 这 样 的 服务 器 上 就 解析 为 本 地 文件 系统 路 径 。 默 认 行 为 方式 假定 加 载 的 
文件 是 以 ES6 标准 模块 格式 编写 的 。 











另外 ， 还 可 以 通过 HTML 标签 加 载 模块 到 浏览 器 中 ， 这 与 目前 脚本 程序 加 载 的 方式 类 似 。 
编写 本 部 分 的 时 候 ， 还 不 请 楚 这 个 标签 是 <script type="module"> 还 是 <module>。 这 并 非 
由 ES6 决定 ，ES6 讨论 的 同时 在 合适 的 规范 中 对 此 已 经 有 了 很 多 讨论 。 


不 管 这 个 标签 看 起 来 是 什么 样 ， 可 以 确定 的 是 在 底层 将 会 使 用 默认 加 载 器 〈 或 者 是 我 们 将 
在 下 一 小 方 介绍 的 预先 指定 的 自 定义 加 载 器 )。 


就 像 在 markup 中 使 用 的 标签 一 样 ， 模 块 加 载 器 本 身 不 是 由 ES6 指定 的 。 它 是 独立 的 、 平 
行 的 标准 (http:// whatwg.github.io/loader/) ， 目 前 由 WHATWG 浏 览 器 标准 工作 组 管理 。 














接 下 来 的 讨论 反映 了 编写 本 部 分 时 API 设计 上 的 一 个 初期 版 本 ， 未 来 很 可 能 改变 。 


1. 在 模块 之 外 加 载 模块 
直接 与 模块 加 载 器 交互 的 一 个 用 法 是 非 模 块 需要 加 载 一 个 模块 的 情况 。 考 虑 : 





// 一 般 脚 本 在 浏览 器 中 通过 <script> 加 载 ， 这 里 import 不 合法 




















Reflect.Loader.import( "foo" ) // 为 "foo" 返 回 一 个 promise 
.then( function(foo){ 











foo.bar(); 
}); 
工具 Reflect.Loader.import(..) 把 整个 模块 导入 到 命名 参数 (作为 一 个 命名 空间 )， 就 像 
前 面 讨 论 的 命名 空间 导入 import * as foo .. 一样 。 














Reflect.Loader.import(..) 工 具 返 回 一 个 promise， 这 个 promise 模块 就 
绪 就 会 完成 。 要 导入 多 个 模块 ， 可 以 使 用 Promise.all([ .. ]) 组合 多 个 
Reflect.Loader.import(..) 调用 返回 的 promise。 关 于 Promise 的 更 多 信息 ， 
参见 4.1 节 。 
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你 也 可 以 在 真正 的 模块 中 使 用 Reflect.Loader.import(..) 来 动态 /有 条 件 地 加 载 一 个 模 
块 ， 而 import 本 身 无 法 实现 。 比 如 ， 你 可 能 想 要 在 测试 表明 当前 引擎 没有 定义 某 个 ES7+ 
特性 的 情况 下 才 加 载 一 个 包含 这 个 特性 polyfll 的 模块 。 


出 于 性 能 的 考虑 ， 需 要 尽 可 能 避免 动态 加 载 ， 因 为 这 会 妨碍 JavaScript 引擎 根据 静态 分 析 
提前 获取 代码 的 能 


2. 自 定义 加 载 
另外 一 种 与 模块 加 载 器 直接 交互 的 用 法 ， 就 是 需要 通过 配置 甚至 重 定义 来 自 定义 其 行为 的 
情况 。 


在 编写 本 部 分 的 时 候 ， 已 经 有 一 个 模块 加 载 器 API 的 polyfill 在 开发 之 中 了 (https://github. 
com/ModuleLoader/es6-module-loader) 。 因 为 详细 信息 还 比较 少 ， 也 很 可 能 会 变化 ， 所 以 我 
们 来 探索 一 下 几 种 最 终 可 能 出 现 的 特性 。 








Reflect.Loader.import(..) 调用 可 能 会 支持 第 二 个 参数 ， 用 来 指定 自 定义 导入 / 加 载 任务 
的 各 种 选项 。 比 如 : 





Reflect.Loader.import( "foo", { address: "/path/to/foo.js" } ) 
.then( function(foo){ 

//.. 
}) 


还 可 能 会 (通过 某 些 手段 ) 提供 自 定义 支持 来 芷 入 加 载 模块 的 过 程 ， 在 加 载 完成 引擎 编译 
模块 之 前 可 以 执行 一 个 转换 /transpilation 。 





举例 来 说 ， 可 以 加 载 某 些 不 符合 ES6 规范 的 模块 格式 (比如 CoffeeScript、TypeScript、 
CommonJS 和 AMD)。 转 换 步 又 把 它 转换 为 遵循 ES6 规范 的 模块 ， 然 后 引擎 处 理 。 





3.4 类 


几乎 从 JavaScript 发 展 初期 开始 ， 语 法 和 开发 模式 都 极力 营造 支持 面向 对 象 开发 的 假象 。 
通过 诸如 new 和 instanceof 以 及 .constructor 属性 ， 让 人 们 妨 不 住 以 为 JavaScript 在 其 原 
型 系统 内 部 某 处 隐藏 着 类 。 














当然 ，JavaScript“ 类 ”和 传统 的 类 并 不 相同 。 二 者 的 区 别 已 经 有 文档 详尽 说 明 ， 关 于 这 点 
这 里 我 不 再 更 述 。 








要 进一步 学 习 JavaScript 中 用 来 模拟 “类 ”的 模式 ， 以 及 名 为 “委托 ”的 这 
种 对 原型 的 另外 一 种 看 法 ， 参 见 本 系列 《你 不 知道 的 JavaScript (上 卷 )》 第 
二 部 分 的 后 半 部 分 。 
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3.4.1 class 


尽管 JavaScript 的 原型 机 制 并 不 像 传 统 类 那样 工作 ， 但 这 没有 阻止 要 求 这 个 语言 扩展 其 语 
法 糖 使 其 能 够 更 像 真 正 的 类 那样 表达 “类 ”这 种 强烈 的 趋势 。 因 此 有 了 ES6 class 关键 字 
及 其 相关 的 机 制 。 


这 个 特性 是 具有 强烈 争议 性 的 讨论 结果 ， 代 表 着 关于 如 何 实现 JavaScript 类 的 几 种 强烈 冲 
突 观 点 的 更 小 的 妥协 子 集 。 多 数 想 要 JavaScript 完整 类 支持 的 开发 者 会 发 现 这 个 新 语法 的 
部 分 十 分 诱 人 ， 同 时 也 会 发 现 还 有 一 些 要 点 仍然 缺失 。 但 别 着 急 ，TC39 已 经 开始 研究 在 
ES6 后 提供 更 多 的 特性 来 支持 类 。 


新 的 ES6 类 机 制 的 核心 是 关键 字 class， 表 示 一 个 块 ， 其 内 容 定义 了 一 个 函数 原型 的 成 员 。 
考虑 : 
































class Foo { 
constructor(a,b) { 
this.x = a; 
this.y = b; 
} 


gimmeXY() { 
return this.x * this.y; 


} 
需要 注意 以 下 几 点 。 


。 class Foo 表明 创建 一 个 (具体 的 ) 名 为 Foo 的 函数 ， 与 你 在 前 ES6 中 所 做 的 非常 类 似 。 

。 constructor(..) 指定 Foo(..) 国 数 的 签名 以 及 国 数 体内 容 。 

。 类 方法 使 用 第 2 章 讨论 过 的 对 象 字 面 量 可 用 的 同样 的 “简洁 方法 ”语法 。 这 也 包含 本 章 
前 面 讨 论 过 的 简洁 生成 器 形式 , 以 及 ES5 getter/setter 语法 。 但 是 , 类 方法 是 不 可 枚 举 的 ， 
而 对 象 方法 默认 是 可 枚 举 的 。 

。 和 对 象 字 面 量 不 一 样 ， 在 class 定义 体内 部 不 用 逗号 分 隔 成 员 ! 实际 上 ， 这 其 至 是 不 允 
许 的 。 






































可 以 把 前 面 代码 中 的 class 语法 定义 粗略 理解 为 下 面 这 个 等 价 前 ES6 代码 ， 之 前 有 过 原型 
风格 编码 经 验 的 开发 者 可 能 会 对 此 非常 熟悉 : 














function Foo(a,b) { 
this.x = a; 
this.y = b; 


Foo.prototype.gimmeXY = function() { 
return this.x * this.y; 


} 
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i ES6 形式 还 是 新 的 ES6 class 形式 ， 现 在 都 可 以 按照 期 望 来 实例 化 和 使 用 这 





var f = new Foo( 5, 15 ); 


Fs A 
fys yf 15 
f.gimmeXY(); // 75 


注意 ! 尽管 class Foo 看 起 来 很 像 function Foo(), 但 二 者 有 重要 区 别 。 





。 由 于 前 ES6 可 用 的 Foo.call(obj) 不 能 工作 , class Foo 的 Foo(..) 调用 必须 通过 
new 来 实现 。 

。 function Foo 是 “提升 的 ”( 参 见 本 系列 《你 不 知道 的 JavaScript (上 卷 )》 第 一 部 分 )， 
而 class Foo 并 不 是 ，extends .. 语句 指定 了 一 个 不 能 被 “提升 ”的 表达 式 。 所 以 ,在 
实例 化 一 个 class 之 前 必须 先 声 明 它 。 

。 全 局 作用 域 中 的 class Foo 创建 了 这 个 作用 域 的 一 个 词法 标识 符 Foo， 但 是 和 function 
Foo 不 一 样 ， 并 没有 创建 一 个 同名 的 全 局 对 象 属性 。 





因为 class 只 是 创建 了 一 个 同名 的 构造 器 函数 ， 所 以 现 有 的 instanceof 运算 符 对 ES6 类 
仍然 可 以 工作 。 然 而 ，ES6 引入 了 一 种 使 用 Symbol.hasInstance (参见 7.3 节 ) 自 定义 
instanceof 如 何 工作 的 方法 。 


还 有 一 种 我 认为 更 方便 的 思考 类 的 方式 ， 就 是 把 它 看 作 一 个 宏 (macro) ， 用 于 自动 产生 一 
个 prototype 对 象 。 可 选 的 是 ， 如 有 果 使 用 extends， 也 连接 起 了 [[Prototype]] 关系 。 








ES6 class 本 身 并 不 是 一 个 真正 的 实体 ， 而 是 一 个 包 夺 着 其 他 像 函 数 和 属性 这 样 的 具体 实 
体 并 把 它们 组 合 到 一 起 的 元 概念 。 











除了 声明 形式 ，class 也 可 以 是 一 个 表达 式 ， 就 像 在 这 一 句 中 : var x = 
class Y { .. }。 对 于 把 类 定义 (严格 说 ， 是 构造 器 本 身 ) 作为 函数 参数 传 
递 ， 或 者 把 它 赋 给 一 个 对 象 属性 的 时 候 特别 有 用 。 











3.4.2 extends 和 super 

ES6 类 还 通过 面向 类 的 常用 术语 extends 提供 了 一 个 语法 糖 ， 用 来 在 两 个 函数 原型 之 间 
建立 [[Prototype]] 委托 链接 一 一 通常 被 误 称 为 “继承 ”或 者 邻 人 迷惑 地 标识 为 “原型 
继承 ”: 





class Bar extends Foo { 
constructor(a,b,c) { 
super( a, b ); 
this:z EEC; 
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} 


gimmeXYZ() { 
return super.gimmeXY() * this.z; 
} 
} 


var b = new Bar( 5, 15, 25 ); 


b.x; // 5 
b.y; // 15 
b.z; // 25 
b.gimmeXYZ(); // 1875 

















还 有 一 个 重要 的 新 增 特性 是 super， 这 在 前 ES6 中 实际 上 是 无 法 直接 支持 的 (如 果 不 使 用 
某 种 不 幸 的 hack 权衡 的 话 )。 在 构造 器 中 ，super 自动 指向 “ 父 构造 器 *"， 在 前 面 的 例子 中 
就 是 Foo(..)。 在 方法 中 ，super 会 指向 “ 父 对 象 ”， 这 样 就 可 以 访问 其 属性 /方法 了 ， 比 
如 super .gimmeXY( )。 














Bar extends Foo 的 意思 当然 就 是 把 Bar.prototype 的 [[Prototype]] 连接 到 Foo.prototype。 
所 以 ， 在 像 gimmeXYz() 这 样 的 方法 中 ，super 具体 指 Foo.prototype， 而 在 Bar 构造 器 中 


super 指 的 是 Foo。 





super 并 不 仅 限于 在 class 声明 中 使 用 。 它 还 可 以 在 对 象 字 面值 中 使 用 ， 用 
法 和 我 们 这 里 介绍 的 几乎 一 样 。 参 见 2.6.5 节 获 取 更 多 信息 。 


1. super 恶 龙 
super 的 行为 根据 其 所 处 的 位 置 不 同 而 有 所 不 同 ， 这 一 点 值得 注意 。 公 平地 说 ， 绝 大 多 数 
情况 下 这 不 是 一 个 问题 。 但 如 果 你 偏离 了 狭 罕 的 正轨 就 会 出 现 意外 。 


可 能 会 存在 这 种 情况 ， 即 你 想 要 在 构造 器 中 引用 Foo.prototype， 比 如 要 直接 访问 它 的 某 
个 属性 或 方法 。 但 是 ， 构 造 器 中 不 能 这 样 使 用 super ;super .protytype 不 能 工作 。 简 单 地 
说 super(..) 意味 着 调用 new Foo(..)， 但 是 实际 上 并 不 是 指向 Foo 自身 的 一 个 可 用 引用 。 


同样 地 ， 你 可 能 想 要 在 非 构造 器 方法 内 部 引用 Foo(..) 国 数 。super.constructor 指向 国 数 
Foo(..)， 但 是 请 注意 这 个 国 数 只 能 通过 new 调用 。new super.constructor 是 合法 的 ,不 
过 它 在 多 数 情况 下 没什么 用 处 ， 因 为 你 无 法 让 这 个 调用 使 用 或 引用 当前 的 this 对 象 上 下 
文 ， 而 这 很 可 能 才 是 你 需要 的 。 




















还 有 ， 看 起 来 似乎 super 像 this 一 样 可 以 被 函数 上 下 文 驱 动 ， 也 就 是 说 ， 它 们 都 能 动态 绑 
定 。 但 是 ，super 并 不 像 this 那样 是 动态 的 。 构 造 器 或 函数 在 声明 时 在 内 部 建立 了 super 
引用 (在 class 声明 体内 )， 此 时 super 是 静态 绑 定 到 这 个 特定 的 类 层次 上 的 ， 不 能 重 载 
(至 少 在 ES6 中 是 这 样 ) 。 








A 
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这 意味 着 什么 呢 ? 它 意 味 着 如 果 你 习惯 于 调用 一 个 “类 ”的 方法 时 通过 覆盖 它 的 this 来 从 
另外 一 个 类 中 “ 借 来 ”这 个 方法 ， 比 如 通过 call() 或 appLy(..)， 那 么 如 果 借用 的 这 个 方 
法 内 有 一 个 super， 结 果 很 可 能 出 乎 意料 。 考 虑 下 面 这 个 类 层次 : 












































class ParentA { 

constructor() { this.id = "a"; } 

foo() { console.log( "ParentA:", this.id ); } 
} 


class ParentB { 

constructor() { this.id = "b"; } 

foo() { console.log( "ParentB:", this.id ); } 
} 


class ChildA extends ParentA { 
foo() { 
super .foo(); 
console.log( "ChildA:", this.id ); 
} 
} 


class ChildB extends ParentB { 
foo() { 


super .foo(); 
console.log( "ChildB:", this.id ); 


} 
J 
var a = new ChildA(); 
a.foo(); // ParentA: a 
// ChildA: a 
var b = new ChildB();  // ParentB: b 
b.foo(); // ChildB: b 





























在 前 面 的 代码 中 ， 看 起 来 一 切 似乎 都 自然 而 然 。 但 如 果 你 想 要 借用 b.foo() 并 在 3 的 上 下 
文中 使 用 它 一 一 通过 动态 this 绑 定 ， 这 样 的 借用 是 十 分 常见 的 ， 并 且 有 多 种 不 同 的 使 用 方 
法 ， 包 括 最 著名 mixins 一 一 你 可 能 会 发 现 结果 不 幸 地 出 平 意料 : 






































// 在 a 的 上 下 文中 借 来 b.foo() 使 用 
b.foo.call( a ); // ParentB: a 
// ChildB: a 








可 以 看 到 ，this.id 引用 被 动态 重新 绑 定 ， 因 此 两 种 情况 下 都 打印 : a， 而 不 是 : b。 但 是 
b.foo() 的 super.foo() 引用 没有 被 动态 重 绑 定 ， 所 以 它 仍 然 打 印 出 ParentB 而 不 是 期 望 的 


ParentA。 


为 b.foo() 引用 了 super， 它 是 静态 绑 定 到 ChildB/ParentB 类 层次 的 ， 而 不 能 用 在 
ChildA /ParentA 类 层次 。ES6 并 没有 对 这 个 局 限 提供 解决 方案 。 


如 果 你 有 一 个 静态 类 层次 ， 而 没有 “ 异 花 传粉 ”的 话 ，super 似乎 可 以 按照 直觉 期 望 
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工作 。 但 公正 地 说 ， 实 现 this 感知 编码 的 主要 好 处 之 一 就 是 这 种 灵活 性 。 简 单 地 说 ， 
cLass+super 要 求 避免 使 用 这 样 的 技术 。 


最 后 的 选择 归结 为 把 对 象 设计 限制 在 这 些 静 态 类 层次 之 内 
好 一 一 或 者 放弃 “模拟 ”类 的 企图 转 而 拥抱 动态 和 灵活 性 ， 拥 抱 非 类 对 象 和 [[Prototype]] 
委托 (参见 本 系列 《你 不 知道 的 JavaScript (上 卷 )》 第 二 部 分 ) 。 


2. 子 类 构造 器 

对 于 类 和 子 类 来 说 ， 构 造 器 并 不 是 必须 的 ， 如果 省 略 的 话 那 么 二 者 都 会 自动 提供 一 个 默认 
构造 器 。 但 是 ， 这 个 默认 替代 构造 器 对 于 直接 类 和 扩展 类 来 说 有 所 不 同 。 

具体 来 说 ， 默 认 子 类 构造 器 自动 调用 父 类 的 构造 器 并 传递 所 有 参数 。 换 句 话 说 ， 可 以 把 默 
认 子 类 构造 器 看 成 下 面 这 样 : 


class、extends 和 super 就 
































constructor(...args) { 
super(...args); 


这 是 一 个 需要 注意 的 重要 细 广 。 并 不 是 在 所 有 文 持 类 的 语言 中 子 类 构造 器 都 会 自动 调用 
父 类 构造 器 。C++ 会 这 样 ，Java 则 不 然 。 更 重要 的 是 ， 在 前 ES6 的 类 中 ， 并 不 存在 这 样 
的 自动 “ 父 类 构造 器 ”调用 。 如 果 你 的 代码 依赖 的 这 样 的 调用 没有 发 生 ， 那 么 转换 为 ES6 
class 的 时 候 要 格外 小 心 。 


另外 一 个 ES6 子 类 构造 器 或 许 是 出 平 意料 的 偏离 /限制 是 ， 子 类 构造 器 中 调用 super(.…) 
之 后 才能 访问 this。 其 原因 比较 微妙 复杂 ， 但 可 以 归结 为 创建 /初始 化 你 的 实例 this 的 实 
际 上 是 父 构造 器 。 前 ES6 中 ， 它 的 实现 正 相反 ，this 对 象 是 由 “ 子 类 构造 器 ”创建 的 ， 然 
后 在 子 类 的 this 上 下 文中 调用 “ 父 类 ”构造 器 。 














下 面 来 说 明 一 下 。 以 下 代码 在 前 ES6 中 可 以 工作 : 











function Foo() { 
this.a = 1; 


} 


function Bar() { 
this.b = 2; 
Foo.caLL(C this ); 
} 


// ‘Bar’ "extends" ‘Foo 
Bar.prototype = Object.create( Foo.prototype ); 


而 这 个 等 价 ES6 代码 则 不 合法 : 


class Foo { 
constructor() { this.a = 1; } 
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class Bar extends Foo { 
Constructor() { 
this.b = 2; // 不 允许 在 super() 之 前 
super(); // 要 改正 的 话 可 以 交换 这 两 条 语句 





) 


对 这 个 例子 的 修正 很 简单 ， 只 要 交换 子 类 Bar 构造 器 中 两 个 语句 的 顺序 即 可 。 但 是 ， 如 果 
你 依赖 于 前 ES6 支持 跳 过 调用 “ 父 构造 器 ”这 一 特性 ， 那 么 要 小 心 ， 因 为 在 ES6 中 已 经 不 
允许 这 么 做 了 。 


3. 扩展 原生 类 
新 的 class 和 extend 设计 带 来 的 最 大 好 处 之 一 是 (终于!) 可 以 构建 内 置 类 的 子 类 了 。 比 
如 Array。 考 虑 : 




















class MyCooLArray extends Array { 

first() { return this[0]; } 

last() { return this[this.length - 1]; } 
} 


var a = new MyCoolArray( 1, 2, 3 ); 


a. length; // 3 
a; // [1,2,3] 
a.first(); //1 
a.last(); A 











在 ES6 之 前 ， 有 一 个 Array 的 伪 “ 子 类 ”通过 手动 创建 对 象 并 链接 到 Array.prototype， 只 
能 部 分 工作 。 它 不 支持 真正 array 的 特有 性 质 ， 比 如 自动 更 新 length 属性 。ES6 子 类 则 可 
以 完全 按照 期 望 “继承 ”并 新 增 特性 1 


另外 一 个 常见 的 前 ES6“ 子 类 ”局 限 是 在 创建 自 定义 error“ 子 类 ”时 与 Error 对 象 所 相关 
的 。 真 正 的 Error 对 象 创建 时 ， 会 自动 捕获 特殊 的 stack 信息 ， 包 括 生成 错误 时 的 行 号 和 
文件 名 。 前 ES6 自 定 义 error“ 子 类 ”没有 这 样 的 特性 ， 这 严重 限制 了 它们 的 应 用 。 

















ES6 前 来 解救 : 


class Oops extends Error { 
constructor(reason) { 
this.oops = reason; 
J 


// 之 后 : 
var ouch = new Oops( "I messed uyp!" ); 
throw ouch; 
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前 面 代 码 中 的 自 定义 error 对 象 ouch 的 行为 就 像 其 他 任何 真正 error 对 象 一 样 ， 包 括 捕获 
stack。 这 是 一 个 巨大 的 改进 ! 

















3.4.3 new.target 

ES6 以 new. target 的 形式 引入 了 一 个 新 概念 ， 称 为 元 属性 (meta property， 参 见 第 7 章 )。 
如 果 说 看 起 来 有 点 奇怪 的 话 ， 那 么 实际 上 也 是 这 样 ， 把 关键 字 通过 . 与 属性 名 关联 起 来 可 
绝对 不 是 常见 的 JavaScript 模式 。 


new.target 是 一 个 新 的 在 所 有 函数 中 都 可 用 的 “魔法 ” 值 ， 尽 管 在 一 般 函 数 中 它 通常 是 
undefined。 在 任何 构造 器 中 ，new.target 总 是 指向 new 实际 上 直接 调用 的 构造 器 ， 即 使 构 
造 器 是 在 父 类 中 且 通 过 子 类 构造 器 用 super(..) 委托 调用 。 


考虑 : 




















class Foo { 
constructor() { 
console.log( "Foo: ", new.target.name ); 
} 
} 


class Bar extends Foo { 
constructor() { 
super(); 
console.log( "Bar: ", new.target.name ); 


} 
baz() { 


console.log( "baz: ", new.target ); 
} 


} 


var a = new Foo(); 
// Foo: Foo 


var b = new Bar(); 
// Foo: Bar ”<-- 遵循 new 调 用 点 
// Bar: Bar 





b.baz(); 
// baz: undefined 


除了 访问 静态 属性 /方法 (参见 下 一 小 节 ) 之 外 ， 类 构造 器 中 的 new.target 元 属性 没有 什 
么 其 他 用 处 。 





如 果 new.target 是 undefined， 那 么 你 就 可 以 知道 这 个 函数 不 是 通过 new 调用 的 。 因 此 如 
果 需 要 的 话 可 以 强制 一 个 new 调用 。 
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3.4.4 static 


当 子 类 Bar 从 父 类 Foo 扩展 的 上 时候， 我 们 已 经 看 到 Bar .prototype 是 [[Prototype]] 链接 到 
Foo.prototype 的 。 然 而 ，Bar() 也 [[Prototype]] 链接 到 Foo()。 这 一 点 可 能 并 不 显而易见 。 





但 是 ， 在 为 一 个 类 声明 了 stattc 方法 (不 只 是 属性 ) 的 情况 下 这 就 很 有 用 了 ， 因 为 这 些 是 
直接 添加 到 这 个 类 的 函数 对 象 上 的 ， 而 不 是 在 这 个 函数 对 象 的 prototype 对 象 上 。 考 虑 : 





class Foo { 
static cool() { console.log( "cool" ); } 
wow() { console.log( "wow" ); } 


} 


class Bar extends Foo { 
static awesome() { 
super .cool(); 
console.log( "awesome" ); 


} 

neat() { 
super .wow( ); 
console.log( "neat" ); 


} 
} 
Foo.cool(); // "cool" 
Bar.cool(); // "cool" 
Bar .awesome(); // "cool" 


// "awesome" 
var b = new Bar(); 


b.neat(); // "wow" 

// "neat" 
b.awesome; // undefined 
b.cool; // undefined 


小 心 不 要 误 以 为 static 成 员 在 类 的 原型 链 上 。 实 际 上 它们 在 函数 构造 器 之 间 的 双向 /并行 
链 上 。 


Symbol.species Getter 构造 器 

static 适用 的 一 个 地 方 就 是 为 派生 ( 子 ) 类 设 定 Symbol.species getter (规范 内 称 为 
@@species)。 如 有 果 当 任何 父 类 方法 需要 构造 一 个 新 实例 ， 但 不 想 使 用 子 类 的 构造 器 本 身 时 ， 
这 个 功能 使 得 子 类 可 以 通知 父 类 应 该 使 用 哪个 构造 器 。 




















举例 来 说 ，Array 有 很 多 方法 会 创造 并 返回 一 个 新 的 Array 实例 。 如 果 定 义 一 个 Array 的 子 
类 ， 但 是 想 要 这 些 方法 仍然 构造 真正 的 Array 实例 而 不 是 你 的 子 类 实例 ， 就 可 以 这 样 使 用 : 
class MyCoolArray extends Array { 


// 强制 species 为 父 构造 器 
static get [Symbol.species]() { return Array; } 
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new MyCoolArray( 1, 2, 3 )， 
a.map( function(v){ return v * 2; } ); 


var a 


b instanceof MyCoolArray;  // false 
b instanceof Array; // true 


下 面 说 明 父 类 方法 如 何 使 用 子 类 species 声明 ， 这 有 点 类 似 于 Array#map(..) 所 做 的 ， 考 虑 : 


class Foo { 
// 推迟 species 为 子 构造 器 
static get [Symbol.species]() { return this; } 
spawn() { 
return new this.constructor[Symbol.species](); 
} 


} 


class Bar extends Foo { 
// 强制 species 为 父 构造 器 
static get [Symbol.species]() { return Foo; } 


} 

var a = new Foo(); 

var b = a.spawn(); 

b instanceof Foo; // true 


var x = new Bar(); 
var y = x.spawn(); 
y instanceof Bar; // false 
y instanceof Foo; // true 


父 类 Symbol. species 通过 return this 来 延迟 到 子 类 ， 就 像 通 常 期 望 的 那样 





手动 声明 使 用 Foo 来 进行 实例 创建 。 当 然 ， 子 类 仍然 可 以 使 用 new this.constructor(..) 


创建 自身 的 实例 。 


3.5 小结 
在 代码 组 织 方面 ，ES6 引入 了 几 个 新 特性 。 


。 检 代 器 提供 了 对 数组 或 运算 的 顺序 访问 。 可 以 通过 像 for..of 和 . 








这 些 新 语言 


特性 


。 生成 器 是 支持 本 地 暂停 /恢复 的 函数 ， 通 过 迄 代 器 来 控制 。 它 们 可 以 用 于 编程 (也 是 交 














互 地 ， 通 过 yield/next(..) 消息 传递 ) 生成 供 迭 代 消 耗 的 值 。 














。 然 后 Bar 覆盖 


来 


来 


。 模块 支持 对 实现 细节 的 私有 封装 ， 并 提供 公开 导出 API。 模 块 定义 是 基于 文件 的 单 例 实 


例 ， 在 编译 时 静态 决议 。 


。 类 对 基于 原型 的 编码 提供 了 更 清晰 的 语法 。 新 增 的 super 也 解决 了 [[Prototype]] 链 中 





相对 引用 的 环 手 问题 





如 果 想 要 通过 拥抱 ES6 来 改进 你 的 JavaScript 项 目 架 构 ， 那 么 应 该 首先 考虑 这 些 新 工 
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第 4 章 


步 流 控制 





40 














如 果 你 已 经 编写 过 大 量 JavaScript 代码 ， 那 么 一 定 了 解 异 步 编 程 是 必需 的 技能 。 管 理 异步 
的 主要 机 制 一 直 以 来 都 是 函数 回调 。 








然而 ，ES6 增加 了 一 个 新 的 特性 来 帮助 解决 只 用 回调 实现 异步 的 严重 缺陷 :Promise。 男 
外 ， 可 以 回顾 一 下 《前 面 章 节 中 的 ) 生成 器 ， 研 究 一 种 组 合 使 用 这 两 者 的 模式 ， 这 是 
JavaScript 异步 流 控 制 技术 的 一 大 进步 。 























4.1 Promise 


让 我 们 先 来 理 清 一 些 错误 观念 : Promise 不 是 对 回调 的 替代 。Promise 在 回调 代码 和 将 要 执 
行 这 个 任务 的 异步 代码 之 间 提 供 了 一 种 可 靠 的 中 间 机 制 来 管理 回调 。 








另外 一 种 看 待 Promise 的 角度 是 把 它 看 作 事 件 监听 者 。 可 以 在 其 上 注册 以 监听 某 个 事件 ， 
在 任务 完成 之 后 得 到 通知 。 这 是 一 个 只 触发 一 次 的 事件 ， 但 仍然 可 以 被 看 作 事件 。 























可 以 把 Promise 链接 到 一 起 ， 这 就 把 一 系列 异步 完成 的 步骤 串联 了 起 来 。 通 过 与 像 aLL(…) 
方法 〈 经 典 术语 中 称 为 “ 门 ") 和 race(.….) 方 法 (经典 术语 中 称 为 “latch”) 这 样 更 高 级 的 
抽象 概念 结合 起 来 ，Promise 链 提供 了 一 个 近似 的 异步 控制 流 。 


还 有 一 种 定义 Promise 的 方式 ， 就 是 把 它 看 作 一 个 未 来 值 future value) ， 对 一 个 值 的 独立 
于 时 间 的 封装 容器 。 不 管 这 个 容器 底层 的 值 是 否 已 经 最 终 确 定 ， 都 可 以 用 同样 的 方法 应 用 
其 值 。 一 旦 观察 到 Promise 的 决议 就 立刻 提取 出 这 个 值 。 换 句 话 说 ，Promise 可 以 被 看 作 是 
同步 函数 返回 值 的 异步 版 本 。 
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Promise 的 决议 结果 只 有 两 种 可 能 : 完成 或 拒绝 ， 附 带 一 个 可 选 的 单个 值 。 如 果 Promise 
完成 ， 那 么 最 终 的 值 称 为 完成 值 ， 如 果 拒 绝 ， 那 么 最 终 的 值 称 为 原因 (也 就 是 “拒绝 的 原 
因 ”)。Promise 只 能 被 决议 (完成 或 者 拒绝 ) 一 次 。 之 后 再 次 试图 完成 或 拒绝 的 动作 都 会 
被 忽略 。 因 此 ， 一 旦 Promise 被 决议 ， 它 就 是 不 变量 ， 不 会 发 生 改变 。 





























显然 ， 看 待 Promise 有 各 种 不 同 的 角度 。 没 有 哪 一 个 角度 是 完整 的 ， 但 每 一 种 看 法 都 提供 
了 整体 的 一 面 。 最 重要 的 一 点 是 ， 它 对 只 用 回调 的 异步 方法 给 予 了 重大 改进 ， 即 提供 了 有 
序 性 、 可 预测 性 和 可 靠 性 。 




















4.1.1 构造 和 使 用 Promise 
可 以 通过 构造 器 Promisel..) 构造 promise 实例 : 
var p = new Promise( function(resolve,reject){ 


// 
于 


提供 给 构造 器 Promise(..) 的 两 个 参数 都 是 国 数 ， 一 般 称 为 resolve(..) 和 reject(..)。 它 
们 是 这 样 使 用 的 。 



































。 如 果 调 用 reject(..)， 这 个 promise 被 拒绝 ， 如 果 有 任何 值 传 给 reject(..)， 这 个 值 就 
被 设置 为 拒绝 的 原因 值 。 

。 如 果 调 用 resolve(..) 且 没 有 值 传 入 , 或 者 传 入 任何 非 promise 值 , 这 个 promise 就 完成 。 

。 如 果 调 用 resove(..) 并 传人 另外 一 个 promise， 这 个 promise 就 会 采用 传 入 的 promise 

的 状态 (要么 实现 要 么 拒绝 ) 不 管 是 立即 还 是 最 终 。 














下 面 是 通过 promise 重 构 回 调 函 数 调用 的 常用 方法 。 假 定 你 最 初 是 使 用 需要 能 够 调用 error- 
first 风格 回调 的 ajax(..) 工具 : 














function ajax(url,cb) { 
// 建立 请 求 ， 最 终 会 调用 cb(..) 
} 


//.. 





ajax( "http://some.url.1", function handler(err,contents){ 
if (err) { 
// 处 理 ajax 错 误 
} 
else { 


// 处 理 contents 成 功 情况 





Fs 
可 以 将 其 转化 为 : 
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function ajax(CurL) { 
return new Promise( function pr(resolve,reject){ 
// 建立 请 求 ， 最 终 会 调用 resolve(..) 或 者 reject(..) 
】 ); 





} 
//.. 


ajax( "http://some.url.1" ) 
.then( 
function fulfilled(contents){ 
// 处 理 contents 成 功 情 况 
]， 
function rejected(reason){ 


// 处 理 ajax 出 错 原 项 

















} 
沾 
Promise 有 一 个 then(..) 方 法， 接受 一 个 或 两 个 回调 函数 作为 参数 。 前 面 的 函数 (如果 
存在 的 话 ) 会 作为 promise 成 功 完 成 后 的 处 理 函 数 。 第 二 个 函数 (如 果 存 在 的 话 ) 会 作 
为 promise 被 显 式 拒绝 后 的 处 理 函 数 ， 或 者 在 决议 过 程 中 出 现 错误 /异常 的 情况 下 的 处 理 









































如 果 某 个 参数 被 省 上 咯 ， 或 者 不 是 一 个 有 效 的 函数 一 一 通常 是 nutl， 那 么 一 个 默认 禁 代 函 数 
就 会 被 采用 。 上 默认 的 成 功 回调 把 完成 值 传 出 ， 默 认 的 出 错 回调 会 传递 拒绝 原因 值 。 





























then(null，handleRejection) 调用 的 简写 形式 是 catch(handleRejection)。 





then(..) 和 catch(..) 都 会 自动 构造 并 返回 另外 一 个 promise 实例 ， 这 个 实例 连接 到 接受 
原来 的 promise 的 不 管 是 完成 或 拒绝 处 理 函 数 (实际 调用 的 那个 ) 的 返回 值 。 萎 虑 : 











ajax( "http://some.url.1" ) 
.then( 
function fulfilled(contents){ 
return contents.toUpperCase(); 
function rejected(reason){ 
return "DEFAULT VALUE"; 
} 
) 
.then( function fulfilled(data){ 
// 处 理 来 自 于 原来 promise 的 处 理 函 数 的 数据 
} ); 





这 段 代 码 中 ， 从 fulfilled(..) 或 者 rejected(..) 返回 一 个 立即 值 ， 然 后 这 个 值 在 下 次 事 
件 中 被 第 二 个 then(..) 的 fulfilled(..) 接受 。 如 果 传 入 的 是 新 的 promise， 那 么 这 个 间 
的 promise 就 会 作为 决议 结果 被 导入 和 采用 : 








ajax( "http://some.url.1" ) 
.then( 
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function fulfilled(contents){ 
return ajax( 
"http://some.url.2?v=" + contents 
); 
]， 
function rejected(reason){ 
return ajax( 
"http://backup.url.3?err=" + reason 
); 
} 
) 
.then( function fulfilled(contents){ 
// contents 来 自 于 后 续 的 ajax(..) 调 用 ， 不 管 是 哪个 调用 






































} ); 
需要 注意 的 是 : 第 一 个 fulfilled(..) 内 部 的 异常 ( 即 被 拒绝 的 promise) 不 会 导致 第 一 
个 rejected(. 被 调用 ， 因 为 这 文 个 处 理 函 数 只 响应 第 一 个 原始 promise 的 决议 。 而 第 二 个 
promise 会 接受 这 个 拒绝 ， 这 个 promise 是 在 第 二 个 then(..) 上 调用 的 。 


前 面 的 代码 片段 中 ， 我 们 没有 监听 拒绝 ， 这 意味 着 它 会 默默 保持 这 个 状态 等 待 未 来 的 观 
如 果 永 远 不 通过 then(.. ia 它 就 会 一 直 保 持 未 处 理 状 

。 有 些 浏览 器 开发 者 终端 可 能 会 监测 到 这 些 未 处 理 拒绝 并 报告 出 来 ， 但 是 这 并 不 是 可 靠 
的 保证 ， 我 们 应 该 一 直观 测 promise 拒绝 。 

















这 里 只 对 Promise 的 理论 和 行为 给 出 了 一 个 简要 概述 。 关 于 更 深入 的 探讨 ， 
参见 本 系列 《你 不 知道 的 JavaScript (中 卷 )》 第 二 部 分 的 第 3 章 。 





4.1.2 Thenable 


Promise(..) 构造 器 的 真正 实例 是 Promise。 但 还 有 一 些 类 promise 对 象 ， 称 为 thenable， 
一 般 来 说 ， 它 们 也 可 以 用 Promise 机 制 解释 。 


任何 提供 了 then(..) 函数 的 对 象 ( 或 函数 ) 都 被 认为 是 thenable。Promise 机 制 中 所 有 可 
以 接受 真正 promise 状态 的 地 方 ， 也 都 可 以 处 理 thenable。 





从 根本 上 说 ，thenable 就 是 所 有 类 promise 值 的 一 个 通用 标签 ， 这 些 类 ee 不 是 被 真正 
的 Promise(..) 构造 器 而 是 被 其 他 系统 创造 出 来 。 从 这 个 角度 来 说 ， 通 常 thenable 的 可 靠 
性 要 低 于 真正 的 Promise。 举 个 例子 ， 考 虑 下 面 这 个 胡作非为 的 thenable: 
var th={ 
then: function thener( fulfilled ) { 


// 每 100ms 调 用 一 次 fuLfiLLed(..)， 直 到 永远 
setIntervaL( fulfilled, 100 ); 
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如 果 接 收 到 了 这 个 thenable， 并 通过 th.then(..) 把 它 链接 起 来 ， 很 可 能 你 会 吃惊 地 发 现 自 
己 的 完成 处 理 函 数 会 被 重复 调用 ， 而 正常 的 Promise 应 该 只 会 决议 一 次 。 

一 般 来 说 ， 如 果 从 某 个 其 他 系统 接收 到 一 个 自称 promise 或 者 thenable 的 东西 ， 不 应 该 讶 
目 信 任 它 。 在 下 一 小 节 中 ， 我 们 会 介绍 一 个 ES6 Promise 包含 的 工具 ， 用 来 帮助 解决 这 个 
信任 问题 。 


但 为 了 更 进一步 理解 这 个 问题 的 危害 性 ， 考 虑 一 下 : 任何 代码 中 的 任何 对 象 ， 当 然 如 果 是 
与 Promise 一 起 使 用 的 话 ， 只 要 定义 了 名 为 then() 的 方法 ， 就 可 能 被 当 作 是 一 个 thenable， 
不 管 这 个 东西 的 目的 是 否 与 Promise 风格 的 异步 编码 相关 。 

在 ES6 之前， 并 没有 对 then(..) 方 法 名 称 有 任何 特殊 保留 ， 可 以 想象 应 该 有 一 些 实现 选 
用 了 这 个 方法 名 称 ， 而 Promise 那 时 候 还 没有 出 现 呢 。 最 可 能 出 现 的 误 用 thenable 的 情况 
是 那些 使 用 了 then(..) 方法 ， 但 是 并 没有 严格 遵循 Promise 风格 的 异步 库 一 一 确实 有 几 个 
这 样 的 “野生 ” 库 。 

你 的 责任 是 ， 避 免 把 可 能 被 误 认 为 thenable 的 值 直 接 用 于 Promise 机 制 。 


























4.1.3 Pronmise API 
Promise API 还 提供 了 一 些 静态 方法 与 Promise 一 起 工作 。 


Promise.resolve(..) 创建 了 一 个 决议 到 传 入 值 的 promise。 我 们 把 它 的 工作 机 制 与 手动 方 
var pl = Promise.resolve( 42 ); 
var p2 = new Promise( function pr(resolve){ 


resoLve( 42 ); 
地 


pl 和 p2 的 最 终 行为 方式 是 完全 相同 的 。 通 过 promise 来 决议 也 是 一 样 : 


var theP = ajax( .. ); 





var pl = Promise.resolve( thep ); 


var p2 = new Promise( function pr(resolve){ 
resoLve( thep ); 
$3; 


Promise.resolve(..) 是 一 个 针对 上 一 小 节 中 介绍 的 thenable 信任 问题 的 解 
决 方案 。 对 于 任何 还 没有 完全 确定 是 可 信 promise 的 值 ， 甚 至 它 可 能 是 立即 
值 ， 都 可 以 通过 把 它 传 给 Promise.resolve(..) 来 规范 化 。 如 果 这 个 值 已 经 
是 可 以 确定 的 promise 或 者 thenable， 它 的 状态 /决议 就 会 被 直接 采用 ， 这 
样 会 避免 出 错 。 而 如 果 它 是 一 个 立即 值 ， 那 么 它 会 被 “封装 ”为 一 个 真正 的 
promise， 这 样 就 把 它 的 行为 方式 规范 为 异步 的 。 
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Promise.reject(..) 创建 一 个 立即 被 拒绝 的 promise， 和 与 它 对 应 的 Promise(..) 构造 器 一 样 : 





var pl = Promise.reject( "Oops" ); 


var p2 = new Promise( function pr(resolve,reject){ 
reject( "Oops" ); 
下 
resolve(..) 和 Promise.resolve(..) 可 以 接受 promise 并 接受 它 的 状态 /决议 ， 而 reject (..) 
和 Promise.reject(..) 并 不 区 分 接收 的 值 是 什么 。 所 以 ， 如 果 传 入 promise 或 thenable 来 拒绝 ， 
这 个 promise /thenable 本 身 会 被 设置 为 拒绝 原因 ， 而 不 是 其 底层 值 。 



































Promise.all([ .. ]) 接受 一 个 或 多 个 值 的 数组 比如， 立即 值 、promise、thenable)。 它 返 
回 一 个 promise， 如 果 所 有 的 值 都 完成 ， 这 个 promise 的 结果 是 完成 ;一 旦 它们 中 的 某 一 个 
被 拒绝 ， 那 么 这 个 promise 就 立即 被 拒绝 。 





从 这 些 值 /promise 开始 : 











var p1 = Promise.resolve( 42 ); 
var p2 = new Promise( function pr(resolve){ 
setTimeout( function(){ 
resoLve( 43 ); 
}, 100 ); 


Var v3 = 44; 
var p4 = new Promise( function pr(resoLve,reject){ 
setTimeout( function(){ 
reject( "Oops" ); 
}, 10); 
} ); 


让 我 们 考虑 一 下 Promise.all([ .. ]) 如 何 与 这 些 值 的 组 合 合作 : 


Promise.all( [pi,p2,v3] ) 
.then( function fulfilled(vals){ 
console.log( vals ); // [42,43,44] 


六 


Promise.all( [p1,p2,v3,p4] ) 
.then( 
function fulfilled(vals){ 
// 不 会 到 达 这 里 


]， 
function rejected(reason){ 

ConsoLe.Log( reason ); // 0ops 
} 


3 


Promise.all([ .. ]) 等 待 所 有 都 完成 (或 者 第 一 个 拒绝 )， 而 Promise.race([ .. ]) 等 待 
第 一 个 完成 或 者 拒绝 。 考 虑 : 
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// 注意 : 重新 设置 检测 值 ， 以 避免 被 时 序 问 题 所 误导 ! 


Promise.race( [p2,p1,v3] ) 
.then( function fulfilled(val){ 

console.log( val ); // 42 
站 好 


Promise.race( [p2,p4] ) 
.then( 
function fulfilled(val){ 
// 不 会 到 达 这 里 





]， 
function rejected(reason){ 
console.log( reason ); // 0ops 
} 
); 


Promise.all([]) 将 会 立即 完成 (没有 完成 值 )，Promise.race([]) 将 会 永远 
挂 起 。 这 是 一 个 很 奇怪 的 不 一 致 ， 因 此 我 建议 ， 永 远 不 要 用 空 数组 使 用 这 些 
方法 。 





4.2 生成 器 + Promise 
可 以 把 一 系列 promise 以 链 式 表达 ， 用 以 代表 程序 的 异步 流 控制 。 考 虑 : 


step1() 
.then( 
step2， 
step2Failed 
) 
.then( 
function(msg) { 
return Promise.all( [ 
step3a( msg )， 
step3b( msg )， 
step3c( msg ) 
] ) 
} 


) 
.then(step4); 


但 是 ， 还 有 一 种 更 好 的 方案 可 以 用 来 表达 异步 流 控制 ， 而 且 从 编码 规范 的 角度 来 说 也 要 比 很 
长 的 promise 链 可 取得 多 。 我 们 可 以 使 用 在 第 3 章 学 到 的 生成 器 来 表达 我 们 的 异步 流 控制 。 





这 个 重要 的 模式 需要 理解 一 下 : 生成 器 可 以 yield 一 个 promise， 然 后 这 个 promise 可 以 被 
绑 定 ， 用 其 完成 值 来 恢复 这 个 生成 器 的 运行 。 


考虑 一 下 用 生成 器 来 表达 前 面 代码 片段 的 异步 流 控 制 : 
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function xmain() { 
var ret = yield step1(); 


try { 
ret = yield step2( ret ); 


catch (err) { 
ret = yield step2Failed( err ); 
} 


ret = yield Promise.all( [ 
step3a( ret )， 
step3b( ret )， 
step3c( ret ) 

i 


yield step4( ret ); 
} 
表面 看 来 ， 这 段 代 码 似乎 比 前 面 代码 中 的 等 价 promise 链 实现 更 元 长 。 但 是 ， 它 提供 了 一 
种 更 有 吸引 力 ， 同 时 也 是 更 重要 、 更 易 懂 、 更 合理 且 看 似 同步 的 编码 风格 (通过 给 “ 返 
回 ” 值 的 = 赋值 等 )。 特 别 是 由 于 try. .catch 出 错 处 理 可 以 跨 过 这 些 隐 藏 的 异步 边界 。 
























































为 什么 与 生成 器 一 起 使 用 Promise ? 不 用 Promise 肯定 也 可 以 实现 异步 生成 器 编码 。 





Promise 是 一 种 把 普通 回调 或 者 thunk 控制 反 转 (参见 本 系列 《你 不 知道 的 JavaScript (中 
卷 )》 第 二 部 分 ) 反 转 回来 的 可 靠 系统 。 因 此 ， 把 Promise 的 可 信任 性 与 生成 器 的 同步 代码 
组 合 在 一 起 有 效 解 决 了 回调 所 有 的 重要 缺 唤 。 另 外 ， 像 Promise.all([ .. ]) 这 样 的 工具 
也 是 在 生成 器 的 单个 yield 步骤 表达 并 发 性 的 一 个 优秀 又 简洁 的 方法 。 


























这 个 魔法 是 如 何 实现 的 呢 ? 我 们 需要 一 个 可 以 运行 生成 器 的 运行 器 (runner)， 接 受 一 个 
yield 出 来 的 promise， 然 后 将 其 连接 起 来 用 以 恢复 生成 器 ， 方 法 是 或 者 用 完成 成 功 值 ， 或 
者 用 拒绝 原因 值 抛 出 一 个 错误 到 生成 器 。 





很 多 支持 异步 的 工具 / 库 都 有 这 样 的 “运行 器 >”， 比 如 0Q.spawn(..)， 以 及 我 的 asyncquence 
库 的 runner(..) 插件 。 而 这 里 是 用 一 个 单独 的 运行 器 来 说 明 这 个 过 程 的 工作 原理 : 


























function run(gen) { 
var args = [].slice.call( arguments, 1), it; 


it = gen.apply( this, args ); 


return Promise.resolve() 
.then( function handleNext(value){ 
var next = it.next( vaLue ); 


return (function handleResult(next){ 
if (next.done) { 
return next.value; 
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} 


else { 
return Promise.resolve( next.value ) 
.then( 
handLeNext， 


function handleErr(err) { 
return Promise.resolve(l 
it.throw( err ) 


) 
.then( handleResult ); 


} 
})( next ); 
} ); 


参见 本 系列 《你 不 知道 的 JavaScript (中 卷 )》 第 二 部 分 ， 可 以 获取 这 个 工具 
更 详尽 注释 的 版 本 。 另 外 ， 由 各 种 异步 库 提 供 的 这 种 run 工具 通常 比 我 们 这 
里 展示 的 更 强大 ， 功 能 更 完善 。 举 例 来 说 ，asynquence 的 runner(..) 能 够 处 
理 yield 出 来 的 promise、 序 列 、thunk 和 立即 〈 非 promise) 值 ， 为 我 们 提供 
了 无 限 的 灵活 性 。 




















所 以 现在 运行 前 面 代码 中 的 *main() 就 这 么 简单 : 


run( main ) 
.then( 
function fulfilled(){ 
// *main() 成 功 完成 
]， 
function rejected(reason){ 
// 哎呀 ， 出 错 了 





} 
); 
本 质 上 说 ， 只 要 代码 中 出 现 超过 两 个 异步 步 又 的 流 控 制 逻 辑 ， 都 可 以 也 应 该 使 用 由 run 工 
具 驱 动 的 promise-yield 生成 器 以 异步 风格 表达 控制 流 。 这 样 可 以 使 代码 理解 和 维护 起 来 更 
简单 。 











这 种 “yield 一 个 promise 来 恢复 生成 器 ”的 模式 将 会 成 为 一 个 常用 模式 ， 这 个 模式 非常 强 
大 ， 下 一 个 版 本 的 JavaScript 几乎 肯定 会 引入 一 个 新 的 函数 类 型 来 自动 执行 这 种 模式 而 无 
需 run 工具 。 我 们 将 在 第 8 章 介绍 async function (应 该 是 叫 这 个 名 字 )。 


4.3 ”小结 


随 着 JavaScript 越 来 越 成 熟 以 及 应 用 越 来 越 广泛 ， 异 步 编 程 越发 地 成 为 核心 问题 。 随 着 需 
求 变 得 越 来 越 复杂 ， 回 调 也 变 得 越 来 越 难以 胜任 ， 直 到 完全 崩溃 。 
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值得 高 兴 的 是 ，ES6 新 增 了 Promise 来 弥补 回调 的 主要 缺陷 之 一 : 缺少 对 可 预测 行为 方式 
的 保证 。Promise 代表 了 来 自 于 可 能 异步 的 任务 的 未 来 完成 值 ， 跨 越 同步 和 异步 边界 对 行 
为 进行 规范 化 。 


但 是 ，Promise 与 生成 器 的 结合 完全 实现 了 重新 安排 异步 流 控 制 代码 来 消除 丑陋 的 回调 乱 
炖 〈 或 称 “ 地 狱 ) 。 


现在 ， 我 们 可 以 在 各 种 异步 库 运 行 器 的 帮助 下 管理 这 些 交 互 ， 而 JavaScript 最 终 会 提供 专 
门 的 语法 来 支持 这 种 交互 。 
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六 
Dm> 媳 


对 于 任何 JavaScript 程序 来 说 ， 对 数据 的 结构 化 组 合 和 访问 都 是 一 个 关键 部 分 。 这 个 语言 
从 一 开始 到 现在 ， 创 建 数据 结构 的 主要 机 制 一 直 都 是 数组 和 对 象 。 当 然 ， 基 于 它们 已 经 建 
立 了 很 多 作为 用 户 库 的 高 级 数据 结构 。 











在 ES6 中 ， 已 经 把 一 部 分 最 有 用 的 〈 也 是 性 能 最 优 的 ! ) 数据 结构 抽象 作为 原生 组 件 新 增 
到 语言 之 中 。 





这 一 章 里 ， 我 们 会 从 TypedArray 开始 探讨 ， 严 格 说 它 是 几 年 之 前 ES5 时 期 的 技术 ， 但 那 
时 是 作为 WebGL 而 不 是 JavaScript 组 件 。 在 ES6 中 ， 它 已 经 被 语言 规范 直接 采纳 ， 进 入 
一 级 (first class) 状态 。 


Map 就 像 是 一 个 对 象 〈 键 / 值 对 )， 但 是 键 值 并 非 只 能 为 字符 串 ， 而 是 可 以 使 用 任何 
值 一 一 甚至 是 另 一 个 对 象 或 map ! Set 与 数组 ( 值 的 序列 ) 类 似 ， 但 是 其 中 的 值 是 唯一 
的 ， 如 果 新 增 的 值 是 重复 的 ， 就 会 被 忽略 。 还 有 相应 的 弱 〈 与 内 存 /垃圾 回收 相关 ) 版 本 : 
WeakMap 和 WeakSet。 























5.1 TypedArray 


正如 在 本 系列 《你 不 知道 的 JavaScript (中 卷 )》 第 一 部 分 中 介绍 的 ，JavaScript 拥有 一 组 内 
置 类 型 ， 比 如 number 和 string。 很 容易 把 称 为 “类 型 数组 ”这 样 的 特性 想象 为 一 个 特定 
类 型 的 值 构成 的 数组 ， 比 如 一 个 只 有 字符 串 构成 的 数组 。 





但 实际 上 带 类 型 的 数组 更 多 是 为 了 使 用 类 数组 语义 (索引 访问 等 ) 结构 化 访问 二 进 制 数 
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据 。 名 称 中 的 “type( 类 型 ) ”是 指 看 待 一 组 位 序列 的 “视图 ”， 本 质 上 就 是 一 个 映射 ， 比 如 
是 把 这 些 位 序列 映射 为 8 位 有 符号 整 型 数组 还 是 16 位 有 符号 整 型 数组 ， 等 等 。 





如 何 构建 这 样 的 位 集合 呢 ? 这 称 为 一 个 “buffer ， 最 直接 的 方法 是 通过 ArrayBuffer(..) 
构造 器 来 构造 


var buf = new ArrayBuffer( 32 ); 
buf .byteLength ; // 32 


现在 buf 就 是 一 个 二 进 制 buffer， 长 为 32 字 节 (256 位 )， 预先 初始 化 全 部 为 6。 一 个 
buffer 本 身 除 了 查看 它 的 byteLength 属性 外 ， 并 不 真正 支持 任何 其 他 交互 。 








有 些 Web 平台 功能 使 用 或 者 返回 数组 buffer， 比 如 FileReader#readAsArray 
Buffer(..)、 XMLHttpRequest#send(..) 和 ImageData(canvas data)。 


而 在 这 个 数组 buffer 之 上 ， 可 以 放置 一 个 “视图 ”， 这 个 视图 以 类 型 数组 的 形式 存在 。 考 虑 : 











var arr = new Uint1i6Array( buf ); 
arr. length; // 16 


arr 是 在 这 个 256 位 buf 上 映射 的 一 个 16 位 无 符号 整 型 的 类 型 数组 ， 也 就 是 说 你 得 到 了 16 
个 元 素 。 


5.1.1 大 小 端 (Endianness) 

理解 下 面 这 点 很 重要 ;arr 的 映射 是 按照 运行 JavaScript 的 平台 的 大 小 端 设 置 (大 端 或 小 
端 ) 进行 的 。 如 果 二 进 制 数 据 的 构造 是 基于 某 个 大 小 端 配 置 ， 而 解释 平台 的 大 小 端 配置 正 
相反 ， 那 么 这 就 成 了 一 个 问题 。 




















大 小 端的 意思 是 多 字 节 数字 (比如 前 面 代 码 片 段 中 创建 的 16 位 无 符号 整 型 ) 中 的 低 字 节 
(8 位 ) 位 于 这 个 数字 字 节 表示 中 的 右 侧 还 是 左 侧 。 























举 个 例子 ， 设 想 一 个 十 进 制 数字 3085， 我 们 需要 用 16 位 来 表示 它 。 如 果 只 是 用 一 个 16 位 数 
字 容器 ， 不 管 大 小 端 配 置 如 何 ， 它 会 被 表示 为 二 进 制 0008116068991101 (十 六 进 制 9ced)。 





但 是 如 果 用 两 个 8 位 数组 表示 数字 3085， 那 么 大 小 端 设置 就 会 明显 影响 它 在 内 存 中 的 存储 
表示 : 


。 0006110000001161/1 gcod (大 端 ) 
。 0006110100001169 / 6dec ( 小 端 ) 


如 果 接收 到 一 个 来 自 于 小 端 系统 的 表示 3685 的 位 序列 0000110100001100， 而 在 大 端 系统 中 








A 
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为 其 建立 视图 ， 得 到 的 值 将 是 3346 (十 进 制 ) 或 者 doc (十 六 进 制 )。 


目前 Web 上 最 常用 的 是 小 端 表示 方式 ， 但 是 肯定 存在 不 采用 这 种 方式 的 浏览 器 。 了 人 解 一 块 
二 进 制 数据 生产 方 和 消费 方 的 大 小 端 属 性 是 很 重要 的 。 


根据 MDN， 这 里 有 一 个 快速 检测 JavaScript 大 小 端的 方法 : 








r 喜 





var littleEndian = (function() { 
var buffer = new ArrayBuffer( 2 ); 
new DataView( buffer ).setInt16( 0, 256, true ); 
return new Int16Array( buffer )[0] === 256; 
])(); 


littleEndian 的 结果 可 能 是 true 也 可 能 是 false， 对 于 多 数 浏 览 器 来 说 ， 它 应 该 会 返回 
true。 这 个 测试 方法 使 用 了 DataView(..)， 此 方法 比 在 buffer 上 建立 的 视图 访问 (getting/ 
setting) 位 提供 了 更 底层 、 更 小 粒度 的 控制 方法 。 前 面 代码 片段 中 setInt16(..) 方 法 的 第 
三 个 参数 是 用 来 通知 Dataview 要 使 用 哪 种 大 小 端 配 置 来 操作 。 




















不 要 把 数组 buffer 的 底层 二 进 制 存 储 的 大 小 端 和 给 定数 字 在 JavaScript 程序 
中 如 何 表示 搞 混 。 比 如 ，(3985).tostring(2) 返回 "116000001101"， 加 上 前 
面 4 个 隐 去 的 "0" 看 起 来 似乎 是 大 端 表示 。 实 际 上 ， 这 个 表示 法 是 基于 16 
位 视图 ， 而 不 是 两 个 8 位 字 节 的 表示 。 要 确定 JavaScript 环境 的 大 小 端 ， 最 
好 的 方法 就 是 前 面 的 DataView 测试 。 














5.1.2 多 视图 
单个 buffer 可 以 关联 多 个 视图 ， 比 如 : 
var buf = new ArrayBuffer( 2 ); 


var View8 = new Uint8Array( buf ); 
var View16 = new Uint1i6Array( buf ); 


view16[0] = 3085; 


view8[0]; // 13 
view8[1]; /{ 12 
view8[0].toString( 16 ); //"d" 
view8[1].toString( 16 ); /fe 


// 交换 (就 像 大 小 端 变换 一 样 ! ) 


var tmp = view8[0]; 





view8[0] = view8[1]; 
view8[1] = tmp; 
view16[0]; // 3340 
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这 个 带 类 数组 构造 器 有 多 个 签名 变 体 。 目 前 我 们 展示 的 情况 都 是 传人 已 经 存在 的 buffer。 
然而 这 种 形式 还 接受 两 个 额外 参数 : byteoffset 和 Length。 换 句 话 说， 可 以 从 非 9 的 位 置 
开始 带 类 型 数组 视图 ， 也 可 以 不 消耗 整个 buffer 长 度 。 


如 果 二 进 制 数据 的 buffer 包含 的 数据 格式 大 小 /位置 不 均匀 ， 这 种 技术 是 非常 有 用 的 。 


举例 来 说 ， 考 虑 一 个 二 进 制 buffer， 在 它 的 起 始 位 置 有 一 个 2 字 节 数字 (也 就 是 “ 字 ”)， 
接着 是 两 个 1 字 市 数字 ， 然 后 是 一 个 32 位 浮 点 数 。 这 展示 了 如 何 通 过 在 同一 个 buffer 建 
并 多 个 视图 ， 从 不 同 的 位 置 ， 以 不 同 长 度 访问 这 个 数据 : 





























var first = new Uint1i6Array( buf, 0, 2 )[0]， 
second = new Uint8Array( buf, 2, 1 )[0], 
third = new Uint8Array( buf, 3, 1 )[0]， 
fourth = new Float32Array( buf, 4, 4 )[0]; 


5.1.3” 带 类 数组 构造 器 

除了 前 面 一 节 中 展示 的 (buffer,[offset，[Length]]) 形式 ， 带 类 数组 构造 器 还 支持 以 下 这 

些 形式 。 

。 [constructor](Length) ;在 一 个 新 的 长 度 为 Length 字 节 的 buffer 上 创建 一 个 新 的 视图 。 

。 [constructom](typedArr): 创建 一 个 新 的 视图 和 buffer， 把 typeArr 视图 的 内 容 复 制 进去 。 

。 [constructor\](o0bj): 创建 一 个 新 的 视图 和 buffer， 并 在 类 数组 或 对 象 obj 上 友 代 复制 其 
内 容 。 


ES6 提供 了 下 面 这 些 带 类 数组 构造 器 : 















































。 Int8Array (8 位 有 符号 整 型 )，Uint8Array (8 位 无 符号 整 型 ) 
Uint8ClampedArray (8 位 无 符号 整 型 每 个 值 会 被 强制 设置 为 在 9-255 内 ) ， 
。 Int16Array (16 位 有 符号 整 型 ), Uint16Array (16 位 无 符号 整 型 ) ; 

。 Int32Array (32 位 有 符号 整 型 ), Uint32Array (32 位 无 符号 整 型 ) ; 

。 Float32Array (32 位 浮 点 数 , IEEE-754) ， 

。 Float64Array (64 位 浮 点 数 , IEEE-754)。 























带 类 数组 构造 器 的 实例 几乎 和 普通 原生 数组 完全 一 样 。 一 些 区 别 包括 具有 固定 的 长 度 以 及 
值 都 属于 某 种 “类 型 ”。 


然而 ,它们 的 prototype 方法 几乎 完全 一 样 。 因 此 ， 很 可 能 可 以 把 它们 当 作 普 通 数组 使 用 
而 无 需 转换 。 


举例 来 说 : 




















var a = new Int32Array( 3 ); 
a[0] = 10; 





-A 
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a[1] 
a[2] 


20 ; 
30; 


a.map( function(v){ 
console.log( v ); 


于 ); 
// 10 20 30 


a.join( "-" ); 
// "10-20-30" 


(splice(..)、 push(..) 等 ) 和 concat(..)。 





不 能 对 TypedArray 使 用 不 合理 的 Array.prototype 方 法 ， 比 如 修改 器 


要 清楚 TypedArmay 中 的 元 素 是 展 制 在 声明 的 位 数 大 小 中 的 。 如 采 视 国 答 一 个 DinteAnray 
的 某 个 元 素 赋 值 为 大 于 8 位 的 值 ， 这 个 值 会 被 折 回 (wrap around) 来 适应 其 位 宽 。 


这 可 色 























E 会 引起 问题 ， 比 如 ， 如 果 你 要 把 TypedArray 中 的 值 平 方 。 考 虑 : 


var a = new Uint8Array( 3 ); 
a[0] = 10; 
a[1] = 20; 
a[2] = 30; 


var b = a.map( function(v){ 
return V * v; 


于 入 


b; // [100, 144, 132] 


对 于 值 20 和 309， 平方 值 就 会 洲 出 。 要 解决 这 样 的 局 限 ， 可 以 使 用 TypedArray#from(..) 
函数 : 


关于 与 TypedArray 共享 的 Array.from(. 


var a = new Uint8Array( 3 ); 
a[0] = 10; 
a[1] = 20; 
a[2] = 30; 


var b = Uint1i6Array.from( a, function(v){ 
return V * v; 


于 


b; // [100, 400, 900] 


射 ” 那 一 小 广 解 释 了 作为 第 二 个 参数 的 映射 函数 。 
还 有 很 有 趣 的 一 点 要 考虑 ， 与 普通 数组 一 样 ， 人 但 是 这 


个 方法 默认 使 用 数字 排序 方法 ， 而 不 是 强制 转换 为 字符 串 之 后 进 


.) 方法 的 更 多 信息 ， 参 见 


6.1.2 节 ， 特 别 是 “了 映 











行 字母 序 比较 。 举 例 来 说 : 
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var a=[ 10, 1, 2, ]; 
a.sort(); // [1,10,2] 


var b = new Uint8Array( [ 10, 1, 2 ] ); 
b.sort(); // [1,2,10] 


就 像 Array#sort(..) 一 样 ，TypedArray#sort(..) 接受 了 一 个 可 选 比 较 函 数 参 数 ， 它 们 的 工 
作 方 式 也 是 完全 一 样 的 。 





5.2 Map 
如 有 果 你 的 JavaScript 经 验 丰 富 的 话 ， 应 该 会 了 解 对 象 是 创建 无 序 键 / 值 对 数据 结构 [ 也 称 为 
映射 (map) ] 的 主要 机 制 。 但 是 ， 对 象 作为 映射 的 主要 缺点 是 不 能 使 用 非 字符 串 值 作为 键 。 
举例 来 说 ， 考 虑 : 

var m= {}; 


var x= { id: 1 }, 
ye {dy 2 


m[x] = "foo"; 
m[y] = "bar"; 
m[x]; // "bar" 
m[y]; // "bar" 





这 里 发 生 了 什么 ? x 和 y 两 个 对 象 字符 串 化 都 是 "[object 0bject]"， 所 以 m 中 只 设置 了 一 
个 键 。 








有 些 人 通过 维护 平行 的 非 字 符 串 键 数组 和 值 数 组 来 实现 伪 map， 比 如 : 
var keys = [], vals = []; 


var x= { id: 1 }, 
y= {id: 22); 


keys.push( x ); 
vals.push( "foo" ); 


keys.push( y ); 
vals.push( "bar" ); 


keys[0] === x; // true 
vals[0]; // "foo" 
keys[1] === y; // true 
vals[1]; // "bar" 


当然 ， 你 不 想 自己 维护 这 两 个 平行 数组 ， 所 以 可 以 定义 一 个 数据 结构 ， 其 中 包含 自动 管理 








A 
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低层 的 方法 。 除 了 必须 要 自己 实现 这 些 工作 ， 这 样 做 的 主要 缺点 是 访问 的 时 间 复 杂 度 不 再 
是 O(1)， 而 是 O(n)。 








但 在 ES6 中 就 不 再 需要 这 么 做 了 ! 只 需要 使 用 Map(..): 
var m = new Map(): 


var x= { id: 1 }, 
Ld 2 


m.set( x, "foo" ); 
m.set( y, "bar" ); 


m.get( x ); // "foo" 
m.get( y ); // "bar" 


这 里 唯一 的 缺点 就 是 不 能 使 用 方 括号 [ ] 语法 设置 和 获取 值 ， 但 完全 可 以 使 用 get(..) 和 
set(..) 方 法 完美 代 赫 。 


要 从 map 中 删除 一 个 元 素 ， 不 要 使 用 delete 运算 符 ， 而 是 要 使 用 delete() 方 法: 





m.set( x, "foo" ); 
m.set( y, "bar" ); 


m.deLete( y ); 





你 可 以 通过 clear() 清除 整个 map 的 内 容 。 要 得 到 map 的 长 度 (也 就 是 键 的 个 数 )， 可 以 
使 用 size 属性 (而 不 是 Length) : 


m.set( x, "foo" ); 
m.set( y, "bar" ); 


m.size; // 2 
m.clear(); 
m.size; // 0 


Map(..) 构造 器 也 可 以 接受 一 个 iterable (参见 3.1 节 )， 这 个 迭代 器 必须 产生 一 列 数组 ， 每 
个 数组 的 第 一 个 元 素 是 键 ， 第 二 个 元 素 是 值 。 这 种 迭代 的 形式 和 entries() 方法 产生 的 形 
式 是 完全 一 样 的， 下 一 小 市 将 会 介绍 。 这 使 得 创建 一 个 map 的 副本 很 容易 : 


var m2 = new Map( m.entries() ); 


// 等 价 于 : 


var m2 = new Map( m ); 


因为 map 的 实例 是 一 个 iterable， 它 的 默认 迭代 器 与 entries() 相同 ， 所 以 我 们 更 推荐 使 用 
后 面 这 个 简短 的 形式 。 


当然 ， 也 可 以 在 Map(……) 构造 器 中 手动 指定 一 个 项 目 (entry) 列表 ( 键 / 值 数组 的 数组 ) : 
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var Xx = { id: 1 }, 
y= { iid: 2); 
var m = new Map( [ 
[ x, "foo" ], 
[ y, "bar" ] 
] 3 


m.get( x ); 
m.get( y ); 


5.2.1 Map 值 
要 从 map 中 得 到 一 列 值 ， 可 以 


使 月 


// "foo" 
// "bar" 


明 values(..)， 它 会 返回 一 个 迭代 器 。 在 第 2 章 和 第 3 




















和 帮 代 器 (就 像 数 组 ) 的 方法 ， 比 如 spread 运算 符 ... 和 





章 中 ， 我 们 介绍 了 儿 种 顺序 处 型 





for. .of 循环 。 另 外 ， 在 6.1.3 市 我 们 将 会 详细 介绍 Array.from(..) 方法 。 考 虑 : 


var m = new Map(); 


var x= { id: 1 }, 
y= { iid: 2; 


m.set( x, "foo" ); 
m.set( y, "bar" ); 


var vals = [ ...m.values() 


vals; 
Array.from( m.values() ); 


J; 


// ["foo","bar"] 
// ["foo","bar"] 


前 面 一 小 节 介 绍 过 ， 可 以 在 一 个 map 的 项 目 上 使 用 entries() 迭 代 (或 者 默认 map 迭代 
器 )。 考虑 : 

var m = new Map(); 

var Xx= { id: 1 }, 

y= {id: 2}; 

m.set( x, "foo" ); 

m.set( y, "bar" ); 

var vals = [ ...m.entries() ]; 

vals[0][0] === x; // true 

vals[0][1]; // "foo" 

vals[1][0] === y; // true 

vals[1][1]; // "bar" 
5.2.2 Map 键 


要 得 到 一 列 键 ， 可 以 使 用 keys()， 它 会 返回 map 中 键 上 的 氨 代 器 : 
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var m = new Map(); 


var x= { id: 1 }, 
y= { id: 2}; 


m.set( x, "foo" ); 
m.set( y, "bar" ); 


var keys = [ ...m.keys() ]; 


keys[0] === x; // true 
keys[1] === y; // true 


要 确定 一 个 map 中 是 否 有 给 定 的 键 ， 可 以 使 用 has(..) 方 法 : 
var m = new Map(); 


var x = { id: 1 }, 
y= { iid: 2); 


m.set( x, "foo" ); 


m.has( x ); // true 
m.has( y ); // false 


map 的 本 质 是 允许 你 把 某 些 额外 的 信息 ( 值 ) 关联 到 一 个 对 象 键 ) 上 ， 而 无 需 把 这 个 信 


息 放 入 对 象 本 身 。 


对 于 map 来 说 ， 尽 管 可 以 使 用 任意 类 型 的 值 作为 键 ， 但 通常 我 们 会 使 用 对 象 ， 因 为 字符 串 











或 者 其 他 基本 类 型 已 经 可 以 作为 普通 对 象 的 键 使 用 。 换 句 话 说， 除非 某 些 或 者 全 部 键 需要 
是 对 象 ， 否 则 可 以 继续 使 用 普通 对 象 作 为 影射 ， 这 种 情况 下 map 才 更 加 合适 。 











键 和 GC 的 更 好 选择 一 一 WeakMap。 


5.3 WeakMap 


WeakMap 是 map 的 变 体 ， 二 者 的 多 数 外 部 行为 特性 都 是 一 样 的 ， 
(特别 是 其 GC) 的 工作 方式 。 





如 果 使 用 对 象 作为 映射 的 键 ， 这 个 对 象 后 来 被 丢弃 (所 有 的 引用 解除 )， 试 
图 让 垃圾 回收 (GC) 回收 其 内 存 ， 那 么 map 本 身 仍 会 保持 其 项 目 。 你 需要 
从 map 中 移 除 这 个 项 目 来 支持 GC。 在 下 一 小 节 中 ， 我 们 将 会 介绍 作为 对 象 








区 别 在 于 内 部 内 存 分 配 





WeakMap (只 ) 接受 对 象 作 为 键 。 这 些 对 象 是 被 弱 持 有 的 ， 也 就 是 说 如 果 对 象 本 身 被 垃圾 
回收 的 话 ， 在 WeakMap 中 的 这 个 项 目 也 会 被 移 除 。 然 而 我 们 无 法 观测 到 这 一 点 ， 因 为 对 
象 被 垃圾 回收 的 唯一 方式 是 没有 对 它 的 引用 了 。 但 是 一 旦 不 再 有 引用 ， 你 也 就 没有 对 象 引 


























用 来 查看 它 是 否 还 存在 于 这 个 WeakMap 中 了 。 
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除 此 之 外 ，WeakMap 的 API 是 类 似 的 ， 尽 管 要 更 少 一 些 ; 
var m = new WeakMap(); 


Var XS Td 1 
y= {id: 2}; 


m.set( x, "foo" ); 


m.has( x ); // true 
m.has( y ); // false 


WeakMap 没有 size 属性 或 clear() 方法 ， 也 不 会 暴露 任何 键 、 值 或 项 目 上 的 迭代 器 。 所 
以 即使 你 解除 了 对 x 的 引用 ， 它 将 会 因 GC 时 这 个 条 目 被 从 m 中 移 除 ， 也 没有 办 法 确定 这 
一 事实 。 所 以 你 就 相信 JavaScript 所 声明 的 吧 ! 


和 Map 一 样 ， 通 过 WeakMap 可 以 把 信息 与 一 个 对 象 软 关联 起 来 。 而 在 对 这 个 对 象 没有 完 
全 控制 权 的 时 候 ， 这 个 功能 特别 有 用 ， 比 如 DOM 元素 。 如 果 作 为 映射 键 的 对 象 可 以 被 删 
除 ， 并 支持 垃圾 回收 ， 那 么 WeakMap 就 更 是 合适 的 选择 了 。 


需要 注意 的 是 ，WeakMap 只 是 弱 持 有 它 的 键 ， 而 不 是 值 。 考 虑 : 








var m = new WeakMap(); 


Var 


null; // { id: 1 } HGC 
null; // { id: 2 } 可 GC 
// 只 因 { id: 1 } 可 GC 








w = null; // { id: 4 } 不 可 GC 


因此 ， 我 认为 WeakMap 更 应 该 叫 作 “Weak-KeyMap”。 


5.4 Set 
set 是 一 个 值 的 集合 ， 其 中 的 值 唯一 (重复 会 被 忽略 ) 。 


set 的 API 和 map 类似。 只 是 add(..) 方法 代替 了 set(..) 方法 〈 某 种 程度 上 说 有 点 讽刺 )， 
没有 get(…) 方法 。 
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考虑 : 
var Ss = new Set(); 


var x = { id: 1 }, 
y= { id: 2); 

s.add( x ); 

s.add( y ); 

s.add( x ); 


s.size; // 2 


s.delete( y ); 


s.size; //1 
s.clear(); 
s.size; // 9 


Set(..) 构造 器 形式 和 Map(..) 类 似 ， 都 可 以 接受 一 个 iterable， 比 如 另外 一 个 set 或 者 仅 
仅 是 一 个 值 的 数组 。 但 是 ， 和 Map(..) 接受 项 目 (entry) 列表 ( 键 / 值 数组 的 数组 ) 不 同 ， 
Set(..) 接受 的 是 值 (value) 列表 ( 值 的 数组 ) : 


var s = new Set( [x,y] ); 


set 不 需要 get(..) 是 因为 不 会 从 集合 中 取 一 个 值 ， 而 是 使 用 has(..) 测试 一 个 值 是 否 
存在 : 
var s = new Set(); 


var x = { id: 1 }, 
y= { iid: 2); 


s.add( x ); 
s.has( x ); // true 
s.has( y ); // false 


除了 会 把 -0 和 9 当 作 是 一 样 的 而 不 加 区 别 之 外 ，has(.…) 中 的 比较 算法 和 
0bject.is(..) 几乎 一 样 (参见 第 6 章 )。 








Set 迭代 器 
set 的 选 代 器 方法 和 map 一 样 。 对 于 set 来 说 ， 二 者 行为 特性 不 同 ， 但 它 和 map 迭代 器 的 
行为 是 对 称 的。 考虑 : 
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keys() 和 values() 碗 代 器 都 从 set 中 yield 出 一 列 不 重复 的 值 。entries() 迭代 器 yield 出 


var Ss = new Set(); 
= { id: 
= { id: 
s.add( x ).add( y ); 


var keys = [ ...s.keys() ]， 


vals = [ ...s.values() ]， 
entries = [ ...s.entries() ]; 
keys[0] === x; 
keys[1] === y; 
vals[0] === x; 
vals[1] === y; 
entries[0][0] === x; 
entries[0][1] === x; 
entries[1][0] === y; 
entries[1][1] === y; 





一 列 项 目 数组 ， 其 中 的 数组 的 两 个 项 目 都 是 唯一 set 值 。set 默认 的 迭代 器 是 它 的 values() 
迭代 如 。 


set 国 


set 的 唯一 性 不 允许 强制 转换 ， 所 以 1 和 "1" 被 认为 是 不 同 的 值 











有 的 唯一 性 是 它 最 有 用 的 特性 。 举 例 来 说 : 

















var Ss = new Set( [1,2,3,4,"1",2,4,"5"] )， 
uniques = [ ...s ]; 


uniques; FIL L233 dS] 














o 





5.5 WeakSet 





WeakMap 弱 持 有 它 的 键 (对 其 值 是 强 持 有 的 ) 一 样 ，WeakSet 对 其 值 也 是 弱 持 有 的 

















(这 里 并 没有 键 ) : 


var Ss = new WeakSet(); 


var x = { id: 1 }, 
VE 





s.add( x ); 

s.add( y ); 

x = null; // x 可 GC 

y = null; // y 可 GC 
198 | 第 5 章 
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WeakSet 的 值 必须 是 对 象 ， 而 并 不 像 set 一 样 可 以 是 原生 类 型 值 。 











5.6 “小结 
ES6 定义 了 几 个 有 用 的 集合 ， 这 使 得 对 数据 的 访问 更 结构 化 且 更 高 效 。 





TypedArray 提供 了 对 二 进 制 数据 buffer 的 各 种 整 型 类 型 “视图 ”， 比 如 8 位 无 符号 整 型 和 
32 位 浮 点 型 。 对 二 进 制 数据 的 数组 访问 使 得 运算 更 容易 表达 和 维护 ， 从 而 可 以 更 容易 操纵 
视频 、 音 频 、canvas 数据 等 这 样 的 复杂 数据 。 





Map 是 键 - 值 对 ， 其 中 的 键 不 只 是 字符 串 /原生 类 型 ， 也 可 以 是 对 象 。Set 是 成 员 值 ( 任 
意 类 型 ) 唯一 的 列表 。 




















WeakMap 也 是 map， 其 中 的 键 (对 象 ) 是 弱 持 有 的 ， 因 此 当 它 是 对 这 个 对 象 的 最 后 一 个 引 
用 的 时 候 ，GC (垃圾 回收 ) 可 以 回收 这 个 项 目 。WeakSet 也 是 set， 其 中 的 值 是 弱 持 有 的 ， 
也 就 是 说 如 果 其 中 的 项 目 是 对 这 个 对 象 最 后 一 个 引用 的 时 候 ，GC 可 以 移 除 它 。 























图 灵 社 区 会 员 avilang(1985945885@qq.com) 专 享 尊重 版 权 


第 6 章 


新 增 AP| 





从 值 的 转换 到 数学 计算 ，ES6 为 各 种 内 置 原生 类 型 和 对 象 新 增 了 很 多 静态 属性 和 方法 ， 用 
来 辅助 完成 一 些 常 见 的 任务 。 另 外 ， 某 些 原生 类 型 的 实例 通过 新 的 原型 方法 有 了 新 的 功能 。 














这 些 特性 中 大 多 数 都 可 以 忠实 polyfll。 这 里 我 们 不 讨论 这 样 的 细节 ， 你 可 以 
在 “ES6 Shim” 项 目 (https://github.com/paul millr/es6-shim/) 中 找到 符合 标 
准 的 shim / polyfill。 





6.1 Array 


各 种 JavaScript 用 户 库 扩展 最 多 的 特性 之 一 就 是 数组 (Array) 类 型 。 所 以 ES6 为 Array 增 
加 了 一 些 静 态 函 数 和 原型 (实例 ) 方法 辅助 函数 也 在 意料 之 中 。 





6.1.1 静态 函数 Array.of(..) 

Array(..) 构造 器 有 一 个 众所周知 的 陷阱 ， 就 是 如 果 只 传 入 一 个 参数 ， 并 且 这 个 参数 是 数 
字 的 话 ， 那 么 不 会 构造 一 个 值 为 这 个 数字 的 单个 元 素 的 数组 ， 而 是 构造 一 个 空 数组 ， 甚 
Length 属性 为 这 个 数字 。 这 个 动作 会 产生 不 幸 又 诡异 的 “ 空 槽 ”行为 ， 这 是 JavaScript 数 
组 广 为 人 所 诉 病 的 一 点 。 





Array.of(..) 取代 了 Array(..) 成 为 数组 的 推荐 函数 形式 构造 器 ， 因 为 Array.of(..) 并 没 
有 这 个 特殊 的 单个 数字 参数 的 问题 。 考 虑 : 
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var a = Array( 3 ); 


a. length; /3 

a[0]; // undefined 
var b = Array.of( 3 ); 

b. length; hl 

b[0]; / /3 

var C = Array.of( 1, 2, 3 ); 

c.length; // 3 

5 // [1,2,3] 








什么 情况 下 你 会 需要 使 用 Array.of(..) 而 不 是 只 用 c = [1,2,3] 这 样 的 字面 值 语法 创建 一 
个 数组 呢 ? 有 两 种 可 能 的 情况 。 


如 果 你 有 一 个 回调 函数 需要 传人 的 参数 封装 为 数组 ，Array.of(..) 可 以 完美 解决 这 个 需 
求 。 这 样 的 用 法 不 是 很 常见 ， 但 是 可 能 恰好 “ 解 了 你 的 痒 ”。 
































另外 一 种 情况 是 ， 如 果 你 构建 Array 的 子 类 (参见 3.4 节 )， 并 且 想 要 在 你 的 子 类 实例 中 创 
建 和 初始 化 元 素 ， 比 如 : 








class MyCoolArray extends Array { 
sum() { 
return this.reduce( function reducer(acc,curr){ 
return acc + Curr; 


}, 9 ); 

} 
} 
var Xx = new MyCoolArray( 3 ); 
x. length; // 3--oops! 
x.sum(); // 0--oops! 
var y = [3]; // Array， 而 不 是 MyCoolArray 
y. length; // 1 
y.sum(); // sum 不 是 一 个 函数 
var Zz = MyCoolArray.of( 3 ); 
z.Length ; hl 
z.sum(); {£3 


你 不 能 (简单 地 ) 只 是 为 MyCoolArray 创建 一 个 构造 器 来 覆盖 Array 父 构 造 器 的 行为 ， 
因为 那个 构造 器 对 于 实际 构造 一 个 行为 符合 规范 的 数组 值 (初始 化 this) 是 必要 的 。 
MyCoolArray 子 类 “继承 来 的 ”静态 of(.. ) 方法 提供 了 很 好 的 解决 方案 。 





6.1.2 ”静态 函数 Array.from(..) 


JavaScript 中 的 “类 ( 似 ) 数组 对 象 ”是 指 一 个 有 tength 属性， 具体 说 是 大 于 等 于 0 的 整 
数值 的 对 象 。 
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这 样 的 值 在 使 用 JavaScript 工作 的 过 程 中 是 非常 令 人 诅 形 的 ;普遍 的 需求 就 是 把 它们 转 
换 为 真正 的 数组 ， 这 样 就 可 以 应 用 各 种 Array.prototype 方法 (map(..)、index0f(..) 等 ) 
了 。 这 个 过 程 通常 类 似 于 : 
// 类 数组 对 象 
var arrLike = { 
Length: 3， 
0: "foo", 


1: "bar" 
}; 


var arr = Array.prototype.slice.call( arrLike ); 


另外 一 个 常见 的 任务 是 使 用 stice(..) 来 复制 产生 一 个 真正 的 数组 : 





var arr2 = arr.slice(); 
两 种 情况 下 ， 新 的 ES6 Array.from(..) 方法 都 是 更 好 理解 、 更 优雅 、 更 简洁 的 替代 方法 : 
var arr = Array.from( arrLike ); 


var arrCopy = Array.from( arr ); 


Array.from(..) 检查 第 一 个 参数 是 否 为 iterable (参见 3.1 节 )， 如 果 是 的 话 ， 就 使 用 迭代 器 
来 产生 值 并 “复制 ”进入 返回 的 数组 。 因 为 真正 的 数组 有 一 个 这 些 值 之 上 的 进 代 器 ， 所 以 
会 自动 使 用 这 个 迭代 器 。 


而 如 果 你 把 类 数组 对 象 作 为 第 一 个 参数 传 给 Array.from(..)， 它 的 行为 方式 和 slice() 
(没有 参数 ) 或 者 apply(..) 是 一 样 的 ， 就 是 简单 地 按照 数字 命名 的 属性 从 0 开始 直到 
Length 值 在 这 些 值 上 循环 。 


























考虑 : 
var arrLike = { 
Length: 4， 
2: "foo" 


}; 


Array.from( arrLike ); 
// [ undefined, undefined, "foo", undefined ] 


因为 位 置 0O、1 和 3 在 arrLike 上 并 不 存在 ， 所 以 在 这 些 位 置 上 是 undefined 值 。 
你 也 可 以 这 样 产 生 类 似 的 结果 : 





var emptySLotsArr = []; 
emptySlotsArr. length = 4; 
emptySLotsArr[2] = "foo"; 
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Array.from( emptySLotsArr ); 
// [ undefined, undefined, "foo", undefined |] 


1. 避免 空 权 位 
前 面 代 码 中 的 emptySLotArr 和 Array.from(..) 调用 的 结果 有 一 个 微妙 但 重要 的 区 别 。 也 就 


是 Array.from(..) 永远 不 会 产生 空 槽 位 。 


在 ES6 之 前 ， 如 果 你 想 要 产生 一 个 初始 化 为 某 个 长 度 ， 在 每 个 槽 位 上 都 是 真正 的 
undefined 值 (不 是 空 槽 位 ! ) 的 数组 ， 不 得 不 做 额外 的 工作 : 











var a = Array( 4 ); 
// 4 个 空 槽 位 ! 


var b = Array.appLy( null, { length: 4 } ); 
// 4 个 undefined 值 











而 现在 Array.from(..) 使 其 简单 了 很 多 : 





var C = Array.from( { Length: 4 } ); 
// 4 个 undefined 值 





像 前 面 代码 中 的 a 那样 使 用 空 模 位 数组 能 在 某 些 数组 国 数 上 工作 ， 但 是 另外 
一 些 会 忽略 空 模 位 〈 比 如 map(..) 等 )。 永 远 不 要 故意 利用 空 槽 位 工作 ， 因 为 
它 儿 乎 肯定 会 导致 程序 出 现 诡 异 /意料 之 外 的 行为 。 











2. 映射 

Array.from(..) 工具 还 有 另外 一 个 有 用 的 技巧 。 如 果 提 供 了 的 话 ， 第 二 个 参数 是 一 个 映射 
回调 (和 一 般 的 Array#map(..) 所 期 望 的 几乎 一 样 ) ， 这 个 函数 会 被 调用 ， 来 把 来 自 于 源 的 
每 个 值 映 射 /转换 到 返回 值 。 考 虑 : 


var arrLike = { 
Length: 4， 
2 "foo" 

}; 


Array.from( arrLike, function mapper(val,idx){ 
if (typeof val == "string") { 
return val.toUpperCase(); 


else { 
return idx; 
小 
于 
// [0，1，"F00"，3 ] 
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和 其 他 接收 回调 的 数组 方法 一 样 ，Array.from(..) 接收 一 个 可 选 的 第 三 个 参 
数 ， 如 果 设 置 了 的 话 ， 这 个 参数 为 作为 第 二 个 参数 传人 的 回调 指定 this 绑 


定 。 否 则 ，this 将 会 是 undefined。 














中 
忆 


5.1 市 ， 其 中 给 出 了 使 用 Array.from(..) 把 8 位 值 数 组 转换 为 16 位 值 数组 的 例子 。 


6.1.3 创建 数组 和 子 类 型 

前 面 几 小 节 中 ， 我 们 已 经 讨论 了 Array.of(..) 和 Array.from(..)， 二 者 都 以 与 构造 器 类 似 
的 方式 创建 一 个 新 数组 ， 而 在 子 类 型 方面 它们 又 是 怎样 的 呢 ? 它们 会 创建 基 类 Array 的 实 
例 还 是 继承 子 类 型 的 实例 呢 ? 





class MyCoolArray extends Array { 


} 
MyCoolArray.from( [1, 2] ) instanceof MyCoolArray; // true 


Array.from( 
MyCoolArray.from( [1, 2] ) 
) instanceof MyCoolArray; // false 


of(..) 和 from(..) 都 使 用 访问 它们 的 构造 器 来 构造 数组 。 所 以 如 果 使 用 基 类 Array. 
of(..)， 那 么 得 到 的 就 是 Array 实例 ， 如 果 使 用 MyCoolArray.of(..)， 那 么 得 到 的 就 是 
MyCoolArray 实例 。 


在 3.4 节 中 ， 我 们 介绍 了 @@species 设置 ， 所 有 的 内 置 类 (比如 Array) 都 有 定义 ， 任 何 创 
建新 实例 的 原型 方法 都 会 使 用 它 。slicel..) 是 一 个 很 好 的 例子 : 








var x = new MyCoolArray( 1, 2, 3 ); 
x.slice( 1 ) instanceof MyCoolArray; // true 


一 般 来 说 ， 默 认 的 行为 方式 很 可 能 就 是 需要 的 ， 但 就 像 我 们 在 第 3 章 中 介绍 的 ， 必 要 的 话 
也 可 以 覆盖 它 : 





class MyCoolArray extends Array { 
// 强制 species 为 父 构造 器 
static get [Symbol.species]() { return Array; } 


} 
var Xx = new MyCoolArray( 1, 2, 3 ); 


x.slice( 1 ) instanceof MyCoolArray; // false 
x.slice( 1 ) instanceof Array; // true 


需要 注意 的 是 ，@@species 设置 只 用 于 像 slicel..) 这 样 的 原型 方法 。of(..) 和 from(..) 
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不 会 使 用 它 ， 它 们 都 只 使 用 this 绑 定 〈 由 使 用 的 构造 器 来 构造 其 引用 )。 考 虑 : 


class MyCoolArray extends Array { 
// 强制 species 为 父 构 造 器 
static get [Symbol.species]() { return Array; } 


} 
var Xx = new MyCoolArray( 1, 2, 3 ); 


MyCoolArray.from( x ) instanceof MyCoolArray; // true 
MyCoolArray.of( [2, 3] ) instanceof MyCoolArray; // true 


6.1.4 ”原型 方法 copyWithin(..) 

Array#copyWithin(..) 是 一 个 新 的 修改 器 方法 ，( 包 括 带 类 型 的 数组 在 内 的 ， 参 见 第 5 章 ) 
所 有 数组 都 支持 。copyWithin(..) 从 一 个 数组 中 复制 一 部 分 到 同一 个 数组 的 另 一 个 位 置 ， 
覆盖 这 个 位 置 所 有 原来 的 值 。 


参数 是 target (要 复制 到 的 索引 )、start (开始 复制 的 源 索 引 ， 包 括 在 内 ) 以 及 可 选 的 end 
(复制 结束 的 不 包含 索引 )。 如 果 任 何 一 个 参数 是 负数 ， 就 被 当 作 是 相对 于 数组 结束 的 相 
对 值 。 


























考虑 : 
[1,2,3,4,5].copyWithin( 3, 0 ); yy/ "LEL,23L2] 
[1,2,3,4,5].copyWithin( 3, 0, 1 ); J L1253;1;5] 
[1,2,3,4,5].copyWithin( 0, -2 ); // [4,5,3,4,5] 
[1,2,3,4,5].copyWithin( 0, -2, -1 ); // [4,2,3,4,5] 


就 像 前 面 代码 片段 展示 的 ，copywithin(..) 方法 不 会 增加 数组 的 长 度 。 到 达 数 组 结尾 复制 
就 会 停止 。 


与 你 想象 的 正 相 反 ， 复 制 并 非 总 是 从 左 到 右 〈 索 引 递增 ) 进行 的 。 如 果 产 范围 和 目标 范围 
重合 的 话 ， 可 能 会 出 现 重复 复制 已 经 复制 的 值 ， 而 这 可 能 并 非 你 想 要 的 结果 。 


所 以 ， 内 部 算法 通过 反 向 复制 避免 了 这 种 情况 。 考 虑 : 























[1,2,3,4,5].copyWithin( 2, 1 ); // 32322 


如 果 算 法 严格 按照 从 左 到 右 来 移动 ， 那 么 2 应 该 被 复制 来 覆盖 3， 然 后 这 个 被 复制 的 2 应 该 
被 复制 来 覆盖 4， 然后 这 个 被 复制 的 2 应 该 被 复制 来 覆盖 5， 而 你 最 终 会 得 到 [1,2,2,2,2]。 


而 实际 上 ， 复 制 算法 会 反 向 进行 ， 复 制 4 来 覆盖 5， 然 后 复制 3 来 覆盖 4， 然后 复制 2 来 覆 
盖 3， 最 后 的 结果 是 [1,2,2,3,4]。 根 据 期 望 来 说 ， 这 可 能 是 更 “正确 ”的 结果 ， 但 如 果 只 
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考虑 简 单 的 从 左 到 右 方式 的 复制 算法 ， 你 可 能 会 觉得 很 迷惑 。 


6.1.5 ”原型 方法 fiLL(..) 
可 以 通过 ES6 原生 支持 的 方法 Array#fiLL(..) 用 指定 值 完全 (或 部 分 ) 填充 已 存在 的 数 
组 : 





var a = Array( 4 ).fill( undefined ); 
ay 
// [undefined,undefined,undefined,undefined] 


fill(..) 可 选 地 接收 参数 start 和 end， 它 们 指定 了 数组 要 填充 的 子 集 位 置 ， 比 如 : 


var a = [ nuLL，nuLL，nuLL，nuLL ].fLLL( 42, 1, 3 ); 


al // [null,42,42,null] 


6.1.6 ”原型 方法 find(..) 
一 般 来 说 ， 在 数组 中 搜索 一 个 值 的 最 常用 方法 一 直 是 index0f(..) 方 法， 这 个 方法 返回 找 
到 值 的 索引 ， 如 果 没 有 找到 就 返回 -1: 


var = |[1,2;354,51: 


(a.indexOof( 3 ) != -1); // true 
(a.indexOof( 7 ) != -1); // false 
(a.indexOf( "2" ) != -1); // false 


相 比 之 下 ，index0f(..) 需要 严格 匹配 ===， 所 以 搜索 "2" 不 会 找到 值 2， 反 之 也 是 如 此 。 
indexof(..) 的 匹配 算法 无 法 覆盖 ， 而 且 要 手动 与 值 -1 进行 比较 也 很 麻烦 /笨拙 。 





本 系列 《你 不 知道 的 JavaScript (中 卷 )》 第 一 部 分 中 给 出 了 一 个 有 趣 (也 充 
满 争议 地 难以 理解 ) 的 技术 ， 用 ~ 运算 符 来 绕 过 丑陋 的 返回 值 -1 的 问题 。 








从 ES5 以 来 ,控制 匹 配 逻 辑 的 最 常用 变通 技术 是 使 用 some(..) 方法 。 它 的 实现 是 通过 为 
每 个 元 素 调用 一 个 函数 回调 ， 直 到 某 次 调用 返回 true / 真 值 时 才 会 停止 。 因 为 你 可 以 定义 
这 个 回调 函数 ， 也 就 有 了 对 匹配 方式 的 完全 控制 : 





Var a L12354,5]: 


a.some( function matcher(v){ 
return V == "2"; 


}); // true 
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a.some( function matcher(v){ 


return v == 7; 


} ); 

















// false 


但 这 种 方式 的 缺点 是 如 果 找 到 匹配 的 值 的 上 时候， 只 能 得 到 匹配 的 true/false 指示 ， 而 无 法 


得 到 真正 的 匹配 值 本 身 。 


ES6 的 find(..) 解决 了 这 个 问题 。 基 本 上 它 和 some(..) 的 工作 方式 一 样 ， 除 了 一 旦 回调 
返回 true/ 真 值 ， 会 返回 实际 的 数组 值 : 





VaF d= [1;2;354,51]: 


a.find( function matcher(v){ 


// 2 


// undefined 


return V == "2"; 

下 

a.find( function matcher(v){ 
return v == 7; 

]); 


通过 自 定义 matcher(..) 函数 也 可 以 支持 比较 像 对 象 这 样 的 复杂 值 : 


var points = [ 
{ X10, y: 20. }, 
{ x: 20, y: 30 }, 
{ x: 30, y: 40 }, 
{ x: 40, y: 50 }， 
{ x: 50, y: 60 } 


]; 


points.find( function matcher(point) { 


return ( 
point.x % 3 == 
point.y % 4 == 


); 
} ); 


就 像 其 他 接受 


Undefined。 





0 && 
0 


// { x: 30, y: 40 } 





回调 的 数组 方法 一 样 ，find(..) 接受 一 个 可 选 的 第 二 个 参 
是 


数 ， 如 果 设 定 这 个 参数 就 绑 定 到 第 一 个 参数 回调 的 thts。 否 则 ，this 就 





6.1.7 ”原型 方法 ftndIndex(..) 


前 面 一 小 节 展 示 了 some(. 

















.) 如 何 yield 出 一 个 布尔 型 结果 用 于 在 数组 中 搜索 ， 以 及 


find(..) 如 何 从 数组 搜索 yield 出 匹配 的 值 本 身 ， 另 外 ， 还 需要 找到 匹配 值 的 位 置 索引 。 











indexof(..) 会 提供 这 些 ,但 是 无 法 控制 匹配 逻辑 ， 它 总 是 使 用 === 严格 相等 。 所 以 ES6 
的 findIndex(..) 才 是 解决 方案 : 
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var points = 

20 }， 
30 }， 
40 }， 
50 }， 
60 } 


Lu 
© 
由 
Mee, “Mee Me es 


J 


points.findIndex( function matcher(point) { 
return ( 
point.x % 3 == 0 && 
point.y % 4 == 0 
); 
}); // 2 


points.findIndex( function matcher(point) { 
return ( 
point.x % 6 == 0 && 
point.y % 7 == 0 
); 
} ); at 





不 要 使 用 findIndex(..) != -1 (这 是 indexof(..) 的 惯用 法 ) 从 搜索 中 得 到 布尔 值 ， 因 
为 some(..) 已 经 yield 出 你 想 要 的 true/false。 也 不 要 用 a[ a.findIndex(..) ] 来 得 到 
匹配 值 ， 因 为 这 是 find(..) 所 做 的 事 。 最 后 ， 如 果 需 要 严格 匹配 的 索引 值 ， 那 么 使 用 
index0f(..); 如 果 需 要 自 定义 匹配 的 索引 值 ， 那 么 使 用 findIndex(..)。 















































就 像 其 他 接收 回调 的 数组 方法 一 样 ，findIndex(..) 接收 一 个 可 选 的 第 二 个 
参数 ， 如 果 设 定 这 个 参数 就 绑 定 到 第 一 个 参数 回调 的 this。 否 则 ，this 就 是 


Undefined。 





6.1.8 ”原型 方法 entries()、values()、keys() 

在 第 3 章 中 ， 我 们 展示 了 各 种 数据 结构 如 何 通 过 迭代 器 提供 一 个 依次 枚 举 其 值 的 模式 。 然 
后 在 第 5 章 探索 新 的 ES6 集合 (Map、Set 等 ) 如 何 提供 了 几 种 方法 以 产生 不 同 迭 代 的 时 
候 ， 详 细 展 示 了 这 种 方法 。 

因为 Array 对 于 ES6 来 说 已 经 不 是 新 的 了 ， 所 以 从 传统 角度 来 说 ， 它 可 能 不 会 被 看 作 是 
“集合 ”， 但 是 它 提供 了 同样 的 运 代 器 方法 entries()、vatLues() 和 keys()， 从 这 个 意义 上 
说 ， 它 是 一 个 集合 。 考 虑 : 














var a = [1,2,3]; 





[...a.values()]; // [1;2;3] 
[...a.keys()]; // [9,1,2] 
[...a.entries()]; 1 [ [0;1], [1;2]; [2;3] ] 
[...a[Symbol.iterator]()]; // [1,2,3] 
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就 像 set 一样， 默认 的 Array 迭代 器 和 values() 返回 的 值 一 样 。 


在 后 面 的 6.5.4 节 中 ， 我 们 将 展示 Array.from(..) 如 何 把 数组 中 的 空 槽 位 看 作 值 为 
undefined 的 槽 位 。 这 实际 上 是 因为 在 底层 数组 迭代 器 是 这 样 工 作 的 : 











VaF :a = [J]; 


a.Length = 3; 

a[1] = 2; 

[...a.values()]; // [undefined,2,undefined] 

[...a.keys()]; // [9,1,2] 

[...a.entries()]; // [ [90,undefined], [1,2], [2,undefined] ] 


6.2 Object 


0bject 也 新 增 了 几 个 静态 辅助 函数 。 传 统 上 认为 ， 这 一 类 函数 的 关注 点 在 对 象 值 的 行为 方 
式 / 功 能 上 。 


但 是 ， 从 ES6 开始 ，0bject 静态 方法 也 开始 用 于 那些 还 没有 更 自然 的 有 另外 归属 的 (比如 
Array.from(..)) 通用 全 局 API。 





6.2.1 静态 函数 0bject.is(..) 
静态 函数 0bject.is(..) 执行 比 === 比较 更 严格 的 值 比较 。 


object.is(..) 调用 底层 SameValue 算法 (ES6 规范 ，7.2.9 节 )。SameValue 算法 基本 上 和 
=== 严格 相等 比较 算法 一 样 (ES6 规范 ，7.2.13 节 ) ， 但 有 两 个 重要 的 区 别 。 


考虑 : 





var Xx = NaN, y = 0, z = -0; 


WC 二 二 // false 
Vy &== 2 // true 
Object.is( x, x ); // true 
Object.is( y, z ); // false 


你 应 该 继续 使 用 === 进行 严格 相等 比较 ; 不 应 该 把 0bject.is(..) 当 作 这 个 运算 符 的 替代 。 
但 是 ， 如 果 需 要 严格 识别 NaN 或 者 -9 值 ， 那 么 应 该 选择 Object .is(..)。 


ES6 还 新 增 了 一 个 Number.isNaN(..) 工具 (本 章 后 面 会 介绍 ) ， 这 个 工具 可 
能 是 更 方便 的 检查 工具 ， 与 0bject.is(x,NaN) 相 比 ， 你 可 能 更 喜欢 Number 
isNaN(x)。 你 可 以 使 用 x == 0 && 1 / x === -Infinity 这 种 策 拙 的 方式 精确 
判断 -9 值 ， 但 这 种 情况 下 使 用 0bject.is(x,-9) 会 好 很 多 。 
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6.2.2 ”静态 函数 0bject.getOwnPropertySymbols(..) 
我 们 在 2.13 节 讨 论 过 ES6 中 新 增 的 基本 值 类 型 Symbol。 





Symbol 很 可 能 会 成 为 对 象 最 常用 的 特殊 (元 ) 属性。 所 以 引入 了 工具 0bject. 
getOwnPropertysymbols(..)， 它 直接 从 对 象 上 取得 所 有 的 符号 属性 : 








var 0O={ 
foo: 42， 
[ Symbol( "bar" ) ]: "hello world", 
baz: true 


3 


Object.getOwnPropertySymbols( o ); // [ Symbol(bar) ] 


6.2.3 ”静态 函数 0bject.setPrototype0f(. 


还 是 在 第 2 章 中 ， 我 们 提 到 工具 0bject.setPrototype0f(..)， 这 个 工具 (不 出 人 意料 地 ) 
设置 对 象 的 [[Prototype]] 用 于 行为 委托 (参见 本 系列 《你 a 的 JavaScript (上 卷 )》 
第 二 部 分 )。 考 虑 : 


var o1 = { 

foo() { console.log( "foo" ); } 
Vat o02={ 

// .， 02 的 定义 


Object.setPrototypeOf( 02, o1 ); 


// 委托 给 o1.foo() 
02.foo(); // foo 


也 可 以 : 


var 0o1 = { 
foo() { console.log( "foo" ); } 


3? 


var 02 = Object.setPrototypeOf( { 
/1 .02 的 定义 ，， 
}，ol ); 


// 委托 给 o1.foo() 
02.foo(); // foo 


前 面 两 段 代 码 中 ，o2 和 o1 的 关系 都 出 现在 o2 定义 的 结尾 处 。 更 通俗 地 说 ，%2 和 o1 的 关系 
在 o2 的 定义 上 指定 ， 就 像 类 一 样 ， 也 和 字面 值 对 象 中 的 _proto “ 一样 (参见 2.6.4 节 )。 
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如 前 所 示 ， 紧 接 对 象 创建 之 后 设 定 [[Prototype]] 是 合理 的 。 但 是 在 很 久之 
后 才 修 改 它 不 是 一 个 好 主意 ， 因 为 这 通常 会 产生 令 人 迷惑 而 非 清晰 的 代码 。 























6.2.4 静态 函数 0bject.assign(..) 


很 多 JavaScript 库 / 框架 提供 了 用 于 把 一 个 对 象 的 属性 复制 /混合 到 另 一 个 对 象 中 的 工具 
(比如 ，JQuery 的 extent(..))。 这 些 不 同 的 工具 之 间 有 各 种 细微 的 区 别 ， 比 如 是 否 忽 略 值 
为 undefined 的 属性 。 





ES6 新 增 了 0bject.assign(..)， 这 是 这 些 算法 的 简化 版 本 。 第 一 个 参数 是 target， 其 他 
传 入 的 参数 都 是 源 ， 它 们 将 按照 列 出 的 顺序 依次 被 处 理 。 对 于 每 个 源 来 说 ， 它 的 可 枚 举 
和 自己 拥有 的 (也 就 是 不 是 “继承 来 的 ”) 键 值 ， 包 括 符号 都 会 通过 简单 = 赋值 被 复制 。 
0bject.assign(..) 返回 目标 对 象 。 


考虑 这 个 对 象 设 定 : 








var target = {}, 
Ol:{ 32 








// 设 定 只 读 属性 
Object.defineproperty( o03, "e", { 
value: 5， 
enumerable: true, 
writable: false, 
configurable: false 


} ); 


// 设 定 不 可 枚 举 属性 
Object.defineProperty( o03, "f", { 
value: 6， 
enumerable: false 


3 
03[ Symbol( "g" ) ] =7; 


// 设 定 不 可 枚 举 符号 

Object.defineProperty( o03, Symbol( "h" ), { 
value: 8， 
enumerable: false 


+); 





Object.setPrototypeOf( 03, 04 ); 


只 有 属性 a、b、c、e 以 及 Symbol("g") 会 被 复制 到 target 中 : 
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Object.assign( target，o1，o2，o3 ); 


target.a; //1 
target.b; // 2 
target.c; // 3 


Object.getOwnPropertyDescriptor( target, "e" ); 
// { value: 5, writable: true, enumerable: true， 
// configurable: true } 


Object.getOwnPropertySymbols( target ); 
// [Symbol("g")] 


复制 过 程 会 忽略 属性 d、f 和 symbot("h"); 不 可 枚 举 的 属性 和 非 自 有 的 属性 都 被 排除 在 赋 
值 过 程 之 外 。 另 外 ，e 作为 一 个 普通 属性 赋值 被 复制 ， 而 不 是 作为 只 读 属 性 复制 。 


在 前 面 一 节 中 ， 我 们 展示 了 使 用 setPrototype0f(..) 设 定 对 象 02 和 ol 之 间 的 [[Prototype]] 
关系 。 还 有 另外 一 种 应 用 了 object.assign(..) 的 形式 : 




















VSF O04 := 提 
foo() { console.log( "foo" ); } 
}; 


var 02 = Object.assign( 
Object.create( ol )， 


// .. 02 的 定义 .. 
} 
); 


// 委托 给 o1.foo() 
02.foo(); // foo 


0bject.create(..) 是 ES5 工具， 创建 一 个 [[Prototype]] 链接 的 空 对 象 。 参 
见 本 系列 《你 不 知道 的 JavaScript (上 卷 )》 第 二 部 分 获取 更 多 信息 。 





6.3 Math 


ES6 增加 了 几 个 新 的 数学 工具 ， 填 补 了 和 常用 计算 方面 的 空白 。 这 些 工 具 都 可 以 手动 计算 ， 
但 是 其 中 多 数 现在 有 了 原生 定义 ， 所 以 某 些 情况 下 JavaScript 引擎 可 以 更 优化 地 执行 这 些 
计算 ， 或 者 执行 比 手 动 版 本 精度 更 高 的 计算 。 


这 些 工 具 的 使 用 者 更 可 能 是 asm.js/transpile 的 JavaScript 代码 (参见 本 系列 《你 不 知道 的 
JavaScript (中 卷 )》 第 二 部 分 ) ， 而 非 直接 开发 者 。 
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三 角 国 数 : 
cosh(..) 


双 曲 余弦 函数 


acosh(..) 


双 曲 反 余弦 函数 


sinh(..) 
双 曲 正弦 函数 


asinh(..) 


双 曲 反正 强 函数 


tanh(..) 
双 曲 正切 函数 


atanh(..) 
双 曲 反正 切 函 数 


hypot(..) 
平方 和 的 平方 根 (也 即 : 广义 勾 股 定型 


算术 : 
cbrt(..) 
立方 根 
clz32(..) 
计算 32 位 二 进 制 表示 的 前 导 0 个 数 





HH 
Su 





expm1(..) 
等 价 于 exp(x) - 1 


log2(..) 

二 进 制 对 数 (以 2 为 底 的 对 数 ) 
log10(..) 

以 10 为 底 的 对 数 


Log1lp(..) 
等 价 于 log(x + 1) 


imul(..) 
两 个 数字 的 32 位 整数 乘法 
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元 工具 : 
sign(..) 
返回 数字 符号 
trunc(..) 
返回 数字 的 整数 部 分 
fround(..) 
向 最 接近 的 32 位 ( 单 精度 ) 浮 点 值 取 整 





6.4 Number 


更 重要 的 是 ， 要 让 程序 正常 工作 ， 必 须 精确 处 理 数 字 。ES6 新 增 了 额外 的 属性 和 函数 来 提 
供 常 用 数字 运算 。 


对 Number 的 两 个 新 增 内 容 就 是 指向 已 有 的 全 局 函数 的 引用 : Number .parseInt(..) 和 


Number .parseFLoat(..)。 











6.4.1 静态 属性 
ES6 新 增 了 一 些 作为 静态 属性 的 辅助 数字 和 常量: 
Number .EPSILON 


任意 两 个 值 之 间 的 最 小 差 : 2^-52 (参见 本 系列 《你 不 知道 的 JavaScript (中 卷 )》 第 一 
部 分 的 第 2 章 ， 其 使 用 了 这 个 值 作为 浮 点 数 算法 的 精度 误差 值 ) 


Number .MAX_SAFE_INTEGER 
JavaScript 可 以 用 数字 值 无 歧义 “安全 ”表达 的 最 大 整数 : 2^53 - 1 


Number .MIN_SAFE_INTEGER 
JavaScript 可 以 用 数字 值 无 歧义 “安全 ”表达 的 最 小 整数 : -(2^53 - 1) 或 (-2)^53 + 1 


关于 “安全 ” 整 型 的 更 多 信息 ， 参 见 本 系列 《你 不 知道 的 JavaScript (中 卷 )》 
第 一 部 分 的 第 2 章 。 


6.4.2 ”静态 函数 Number .isNaN(..) 


标准 全 局 工具 isNaN(..) 自 出 现 以 来 就 是 有 缺陷 的 ， 它 对 非 数字 的 东西 都 会 返回 true， 而 
不 是 只 对 真实 的 NaN 值 返回 true， 因 为 它 把 参数 强制 转换 为 数字 类 型 (可 能 会 错误 地 导致 
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NaN)。ES6 增加 了 一 个 修正 工具 Number .isNaN(..)， 可 以 按照 期 望 工作 : 


var a = NaN, b = "NaN", c = 42; 


isNaN( a ); // true 

isNaN( b ); // true--oops! 
isNaN( c ); // false 

Number .isNaN( a ); // true 

Number .isNaN( b ); // false- -修正 了 ! 
Number .isNaN( c ); // false 


6.4.3 ”静态 函数 Number .isFinite(..) 


看 到 像 he .) 这 样 的 函数 名 ， 我 们 常常 认为 它 的 意思 就 是 “ 非 无 限 的 "。 但 是 这 并 
不 完全 正确 。 这 个 ES6 新 工具 有 一 些微 妙 之 处 。 考 虑 : 





var a = NaN, b = Infinity, ¢ = 42; 


Number .isFinite( a ); // false 
Number .isFinite( b ); // false 
Number .isFinite( c ); // true 


标准 的 全 局 isFinite(..) 会 对 参数 进行 强制 类 型 转换 ， 但 是 Number .isFinite(..) 会 略 去 
这 种 强制 行为 : 


var a = "42"; 
isFinite( a ); // true 
Number .isFinite( a ); // false 


可 能 你 更 需要 类 型 转换 ， 这 种 情况 下 全 局 isFinite(..) 是 一 个 有 效 的 选择 。 另 外 ， 也 许 是 
更 合理 的 ， 可 以 使 用 Number.isFinitte(+x)， 习 8 x 强制 转换 为 数字 
(参见 本 系列 《你 不 知道 的 JavaScript (中 卷 )》 第 一 部 分 的 第 4 章 )。 


6.4.4 整 型 相关 静态 函数 
JavaScript 的 数字 值 永远 都 是 浮 点 数 (IEE-754)。 所 以 确定 数字 是 否 为 “ 整 型 ”的 概念 并 不 
是 检查 其 类 型 ， 因 为 JavaScript 并 没有 这 样 区 分 。 


相反 ， 你 需要 检查 这 个 值 的 小 数 部 分 是 否 非 0。 最 简单 的 实现 方法 通常 是 


























=== Math.floor( x ); 


ES6 新 增 了 一 个 辅助 工具 Number .isInteger(..) ， 这 个 工具 可 能 会 更 有 效 地 确定 这 个 性 质 : 





Number .isInteger( 4 ); // true 
Number .isInteger( 4.2 ); // false 
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在 JavaScript 中 ，4、4.、4.0 或 者 4.9066 之 间 并 没有 区 别 。 所 有 这 些 都 会 被 
当 作 “ 整 型 ”并 且 从 Number .isInteger(..) 中 返回 true。 





另外 ，Number .isInteger(..) 会 过 滤 掉 x === Math.floor(x) 可 能 会 搞 混 的 明显 非 整 数值 : 


Number .isInteger( NaN ); // false 
Number .isInteger( Infinity ); // false 
使 用 “整数 ”工作 有 时 候 是 一 个 重要 的 信息 ， 因 为 这 可 能 会 简化 某 些 类 型 的 算法 。 
加 


JavaScript 代码 本 身 不 会 因为 只 使 用 整数 而 运行 得 更 快 ， 只 有 在 使 用 整数 时 ，3| 擎 
才 可 以 采用 优化 技术 (比如 asm.js)。 

















基于 Number .isInteger(..) 对 NaN 和 Infinity 值 的 处 理 方式 ， 要 定义 一 个 isFloat(..) 工 
有 具 并 不 像 !Number .isInteger(..) 那么 简单 。 可 能 需要 做 类 似 于 下 面 这 样 的 事情 : 


function isFloat(x) { 
return Number.isFinite( x ) && !Number.isInteger( x ); 


} 

isFloat( 4.2 ); // true 
isFloat( 4 ); // false 
isFloat( NaN ); // false 
isFloat( Infinity ); // false 


看 起 来 可 能 有 点 奇怪 ,但 是 Infinity 既 不 应 该 被 当 作 整 型 又 不 应 该 被 当 作 浮 
点 型 。 








ES6 还 定义 了 一 个 工具 Number.isSafeInteger(..)， 这 个 工具 检查 一 个 值 以 确保 其 为 整数 
并 且 在 Number .MIN_SAFE_INTEGER-Number .MAX_SAFE_INTEGER 范围 之 内 (全 包含 ) : 





var x = Math.pow( 2，53 )， 

y = Math.pow( -2, 53 ); 
Number .isSafeInteger( x - 1 ); // true 
Number .isSafeInteger( y+ 1 ); // true 
Number .isSafeInteger( x ); // false 
Number .isSafeInteger( y ); // false 


6.5 字符 串 


在 ES6 之 前 已 经 有 了 很 多 字符 串 辅 助 函 数 ， 现 在 又 增加 了 一 些 。 








图 灵 社 区 会 员 avilang(1985945885@qq.com) 专 享 尊重 版 权 


6.5.1 Unicode 函数 
我 们 在 2.12.1 节 a ee 


String#normaLize(..)。 新 卉 


String.fromCodePoint( 0x1d49e ); 
"ab 多 d.codePointAt( 2 ).toString( 16 


String. 





曾 这 些 国 





字符 串 原 型 方法 normalizel.. 
起 来 或 者 把 合并 的 字符 解 开 。 


一 般 来 说 ， 规 范 化 不 会 对 字符 串 的 内 容 造 成 可 见 的 效果 ， 但 是 会 改变 





) 用 于 执行 Unicode 规范 化 ， 


fromCodePoint(..)、String#codePointAt( . 


.) 和 


数 是 为 了 提高 JavaScript 字符 串 值 对 Unicode 的 支持 : 


J ee 
);  // "1d49e" 


或 者 把 字符 用 “合并 符 ” 连 接 


字符 串 的 内 容 ， 这 可 





能 会 影响 像 length 属性 的 结果 ， 以 及 通过 位 置 访问 字符 的 方式 : 


var S1 = "e\u0301"; 
s1.Length ; 


var S2 = si.normalize(); 
Ss2.Length ; 
S2 === "\xE9"; 


) 接受 


normalizel.. 











多 信息 。 


一 个 可 选 的 参数 ， 来 指 
"NFC" (默认 )、"NFD"、"NFKC" 或 者 "NFKD"。 


规范 化 形式 及 其 对 字符 串 产 生 的 影 


“Unicode Normalization Forms” 


// 2 


// 1 
// true 


定 要 使 用 的 规范 化 形式 。 


响 超 出 了 本 部 分 的 讨论 范围 。 参 见 
(http:/www.unicode.org/reports/tr15/) 获取 更 


6.5.2 


静态 函 


数 String.raw(..) 














String.raw(..) 工具 作为 内 置 标签 函数 提供 ， 与 模板 字符 串 字 
用 ， 用 于 获得 不 应 用 任何 转 义 序列 的 原始 字符 串 。 

















这 个 函数 基本 上 不 会 被 手动 调用 ， 而 是 与 标签 模板 字 玫 


i 值 一 起 使 用 : 


var str = "bc"; 


String.raw  \ta${str}d\xE9; 
//“"\tabcd\xE9"， 而 不 是 "” abcdé" 


在 结果 字符 串 中 ,，\ 和 tt 是 独立 的 原始 
也 是 一 样 。 





6.5.3 ”原型 函数 repeat(. 


字符 ， 而 不 是 转 义 字符 \t。 对 于 Unicode 转 义 序列 


. ) 


像 Python 和 Ruby 这 样 的 语言 中 ， 可 以 这 样 重复 字符 串 : 


"fo0r * 3 





// "foofoofoo" 
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JavaScript 不 支持 这 种 形式 ， 因 为 乘法 * 只 对 数字 有 定义 ， 因 此 "foo" 被 强制 转换 成 了 数 
字 NaN。 











然而 ，ES6 定义 了 一 个 字符 串 原 型 方法 repeat(..) 来 完成 这 个 任务 : 





"foo" .repeat( 3 ); // "foofoofoo" 


6.5.4 字符 串 检查 函数 
除了 ES6 之 前 的 String#index0f(..) 和 Stringt#LastIndexof(..)， 又 新 增 了 3 个 用 于 搜索 / 
检查 的 新 方法 : startsWith(..)、endswidth(..) 和 inctudes(..)。 





var palindrome = "step on no pets"; 


palindrome.startsWith( "step on" ); // true 


palindrome.startsWith( "on", 5 ); // true 
palindrome.endsWith( "no pets" ); // true 
palindrome.endsWith( "no", 10 ); // true 
palindrome.includes( "on" ); // true 
palindrome.includes( "on", 6 ); // false 


对 于 所 有 的 字符 串 搜索 / 检查 方法 ， 如 果 寻 找 空 字符 串 "'， 总 是 会 在 字符 串 的 开头 或 结 
尾 找到 。 





默认 情况 下 ， 这 些 方法 不 会 接受 正则 表达 式 用 于 字符 串 搜 索 。 参 见 7.3.5 布 
中 关于 关闭 对 第 一 个 参数 执行 的 isRegExp 检查 的 部 分 。 





6.6 ”小结 
ES6 为 各 种 内 置 原 生 对 象 新 增 了 许多 额外 的 辅助 API。 


。 Array 新 增 了 静态 函数 of(..) 和 from(..) ， 以 及 像 copywithin(..) 和 fill(..) 这 样 的 
原型 函数 。 

。 0bject 新 增 了 静态 函数 is(..) 和 assign(..)。 

。 Math 新 增 了 静态 国 数 acosh(..) 和 clz32(..)。 

Number 新 增 了 静态 属性 Number.EPSILON， 以 及 静态 国 数 Number .isFinite(..)。 

。 String 新 增 了 静态 国 数 String.fromCodePoint(..) 和 String.raw(..)， 以 及 原型 国 数 
repeat(..) 和 incLtudes(..)。 














新 增 内 容 多 数 都 可 以 polyfill (参见 ES6 Shim)， 其 思路 来 自 于 常用 的 JavaScript 库 和 


o 


这 些 
框架 
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第 7 章 


元 编程 





元 编程 是 指 操作 目标 是 程序 本 身 的 行为 特性 的 编程 。 换 名 话说 ， 它 是 对 程序 的 编程 的 纺 
程 。 有 点 擂 口 ， 是 吧 ? 


举例 来 说 ， 如 果 想 要 查看 对 象 a 和 另外 一 个 对 象 b 的 关系 是 否 是 [[Prototype]] 链接 的 ， 
可 以 使 用 a.isProto type(b)， 这 是 一 种 元 编程 形式 ， 通 常 称 为 内 省 (introspection)。 另 外 
一 个 明显 的 元 编程 例子 是 宏 (在 JavaScript 中 还 不 支持 ) 一 一 代码 在 编译 时 修改 自身 。 用 
for..in 循环 枚 举 对 象 的 键 ， 或 者 检查 一 个 对 象 是 否 是 某 个 “类 构造 器 ”的 实例 ， 也 都 是 
常见 的 元 编程 例子 。 
































元 编程 关注 以 下 一 点 或 几 点 : 代码 查看 自身 、 代 码 修改 自身 、 代 码 修改 默认 语言 特性 ， 以 
此 影响 其 他 代码 。 

















元 编程 的 目标 是 利用 语言 自身 的 内 省 能 力 使 代码 的 其 余部 分 更 具 描 述 性 、 表 达 性 和 灵活 
性 。 因 为 元 编程 的 元 (meta) 本 质 ， 我 们 有 点 难以 给 出 比 上 面 提 到 的 更 精确 的 定义 。 要 理 
解 元 编程 ， 最 好 的 方法 是 通过 实例 来 展示 。 

















ES6 在 JavaScript 现 有 的 基础 上 为 元 编程 新 增 了 一 些 形式 / 特性 。 


7.1 函数 名 称 


你 的 代码 在 有 些 情 况 下 可 能 想 要 了 解 自身 ， 想 要 知道 某 个 函数 的 名 称 是 什么 。 如 何 得 知 一 
个 函数 的 名 称 ， 答 案 出 人 意料 地 有 些 模 核 两 可。 考虑 : 
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function daz() { 
Lf ras 
} 


var obj = { 
foo: function() { 
A 


bar: function baz() { 


} 


在 前 面 的 代码 中 , “obj.foo() 的 名 称 是 什么 ”上 略 显 微 妙 。 是 "foo"、""， 还 是 undefined ? 
obj.bar() 呢 ? 它 的 名 称 是 "bar" 还 是 "baz" ? obj.bam() 的 名 称 是 "bam" 还 是 "daz" ? obj. 
zim() 呢 ? 


此 外 ， 作 为 回调 传递 的 函数 又 是 怎样 的 呢 ” 比 如 : 





function foo(cb) { 
// 这 里 cb() 的 名 称 是 什么 ? 

















} 


foo( function(){ 

// 我 是 匿名 的 | 
3 
程序 中 有 多 种 方式 可 以 表达 一 个 函数 ， 函 数 的 “名 称 ” 应 该 是 什么 并 非 总 是 清晰 无 疑 的 。 


更 重要 的 是 ， 我 们 需要 确定 函数 的 “名 称 ” 是 否 就 是 它 的 name 属性 (是 的 ， 函 数 有 一 个 名 
为 nane 的 属性 ) ， 或 者 它 是 否 指向 其 词法 绑 定 名 称 ， 比 如 function bar() {..} 中 的 bar。 


词法 绑 定名 称 是 用 于 像 递归 这 样 的 任务 : 











function foo(i) { 
if (i < 10) return foo( i * 2 ); 
return i; 


} 
name 属性 是 用 于 元 编程 目的 的 ， 所 以 它 是 这 里 讨论 的 关注 点 。 














这 里 比较 混乱 ， 因 为 默认 情况 下 函数 的 词法 名 称 (如 果 有 的 话 ) 也 会 被 设 为 它 的 name 属 
性 。 实 际 上 ，ES5 (和 之 前 的 ) 规范 对 这 一 行为 并 没有 正式 要 求 。name 属性 的 设 定 是 非 标 
准 的 ， 但 还 是 比较 可 靠 的 。 而 在 ES6 中 这 一 点 已 经 得 到 了 标准 化 。 
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如 果 函 数 设 定 了 name 值 ， 那 么 这 个 值 通 常 也 就 是 开发 者 工具 中 栈 踪 迹 使 用 的 
名 称 。 

















推导 
对 于 没有 词法 名 称 的 函数 ，nane 属性 是 怎样 的 呢 ? 


在 ES6 中 ,现在 已 经 有 了 一 组 推导 规则 可 以 合理 地 为 函数 的 name 属性 赋值 ， 即 使 这 个 函 
数 并 没有 词法 名 称 可 用 。 


考虑 : 








var abc = function() { 
的 


abc .name; // "abc" 


如 果 给 了 这 个 函数 一 个 词法 名 称 ， 比 如 abc = function def() { .. }， 那 么 name 属性 当 
然 就 是 "def"。 而 如 果 没 有 词法 名 称 的 话 ， 直 觉 上 看 似乎 名 称 为 "abc" 比较 合理 。 


下 面 是 ES6 中 名 称 推 导 (或 者 没有 名 称 ) 的 其 他 几 种 形式 ， 





(function(){ .. }); // name: 
(function*(){ .. }); // name: 
window.foo = function(){ .. }; // name: 


class Awesome { 


Constructor() { .. } // name: Awesome 
funny() { .. } // name: funny 
var C = class Awesome { .. }; // name: Awesome 
Var ©. 三 并 
foo() { .. }, // name: foo 
*bar() { .. }, // name: bar 
baz: () => { .. }, // name: baz 
bam: function(){ .. }, // name: bam 
get qux() { .. }, // name: get qux 
set fuz() { .. }, // name: set fuz 
["b" + "iz"]: 
function(){ .. }, // name: biz 
[Symbol( "buz" )]: 
function(){ .. } // name: [buz] 
天 
var x = 0.foo.bind( o ); // name: bound foo 
(function(){ .. }).bind( o ); // name: bound 
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export default function() { .. } // name: default 


var y = new Function(); // name: anonymous 
var GeneratorFunction = 
function*(){}.__proto__.constructor; 

var Zz = new GeneratorFunction(); // name: anonymous 








默认 情况 下 ，name 属性 不 可 写 , 但 可 配置 ， 也 就 是 说 如 果 需 要 的 话 ， 可 使 用 0bject. 
defineProperty(..) 来 手动 修改 。 


7.2 元 属性 


在 3.4.3 节 中 ， 我 们 介绍 了 ES6 中 的 一 个 JavaScript 新 概念 : 元 属性 。 正 如 其 名 称 所 暗示 

















的 ， 元 忆 





性 以 局 





性 访问 的 形式 提供 特殊 的 其 他 方法 无 法 获取 的 元 信息 。 








以 new.target 为 例 ， 关 键 字 new 用 作 属 性 访问 的 上 下 文 。 显 然 ，new 本 身 并 不 是 一 个 对 
象 ， 因 此 这 个 功能 很 特殊 。 而 在 构造 器 调用 (通过 new 触发 的 函数 /方法 ) 内 部 使 用 new. 
target 时 ，new 成 了 一 个 虚拟 上 下 文 ， 使 得 new.target 能 够 指向 调用 new 的 目标 构造 器 。 








这 个 是 元 编程 操作 的 一 个 明显 示例 ， 因 为 它 的 目的 是 从 构造 器 调用 内 部 确定 最 初 new 的 目 
标 是 什么 ， 通 用 地 说 就 是 用 于 内 省 (检查 类 型 /结构 ) 或 者 静态 属性 访问 。 


举例 来 说 ， 你 可 能 需要 在 构造 器 内 部 根据 是 直接 调用 还 是 通过 子 类 调用 采取 不 同 的 动作 : 





class Parent { 


} 


constructor() { 
if (new.target === Parent) { 
console.log( "Parent instantiated" ); 
} 
else { 
console.log( "A child instantiated" ); 
} 
} 


class Child extends Parent {} 


var a = new Parent(); 
// Parent instantiated 


var b = new Child(); 
// A child instantiated 


这 里 有 点 微妙 ，Parent 类 定义 内 部 的 constructor() 实际 上 被 给 定 了 类 的 词法 名 称 
(Parent) ， 即 使 语法 暗示 这 个 类 是 与 构造 器 分 立 的 实体 。 
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对 于 所 有 的 元 编程 技术 都 要 小 心 ， 不 要 编写 过 于 机 灵 的 代码 ， 让 未 来 的 你 或 
者 其 他 代码 维护 者 难以 理解 。 要 小 心 使 用 这 些 技巧 。 



































7;3” 公 开 竺 写 
在 2.13 节 中 ， 我 们 介绍 了 ES6 新 原生 类 型 symbol。 除 了 在 自己 的 程序 中 定义 符号 之 外 ， 
JavaScript 预先 定义 了 一 些 内 置 符号 ， 称 为 公开 符号 (Well-Known Symbol，WKS )。 











定义 这 些 符号 主要 是 为 了 提供 专门 的 元 属性 ， 以 便 把 这 些 元 属性 暴露 给 JavaScript 程序 以 
获取 对 JavaScript 行为 更 多 的 控制 。 


接 下 来 我 们 会 简单 介绍 一 下 每 个 符号 和 它们 的 作用 。 


7.3.1 Symbol.iterator 


在 第 2 章 和 第 3 章 中 ， 我 们 介绍 并 使 用 了 符号 @@iterator， 它 是 由 .… 展开 和 for. .of 循 
环 自 动 使 用 的 。 在 第 5 章 中 ， 我 们 还 看 到 了 ES6 新 特性 集合 中 的 @@iterator。 


Symbol.iterator 表示 任意 对 象 上 的 一 个 专门 位 置 〈《 属 性 )， 语 言 机 制 自 动 在 这 个 位 置 上 寻 
找 一 个 方法 ， 这 个 方法 构造 一 个 迁 代 器 来 消耗 这 个 对 象 的 值 。 很 多 对 象 定义 有 这 个 符号 的 
默认 值 。 





然而 ， 也 可 以 通过 定义 Symbol.iterator 属性 为 任意 对 象 值 定义 自己 的 迭代 器 逻辑 ， 即 使 
这 会 履 盖 默认 的 迭代 器 。 这 里 的 元 编程 特性 在 于 我 们 定义 了 一 个 行为 特性 ， 供 JavaScript 
其 他 部 分 (也 就 是 运算 符 和 循环 结构 ) 在 处 理 定义 的 对 象 时 使 用 。 


考虑 : 








var arr = [4,5,6,7,8,9]; 


for (var v of arr) { 
console.log( v ); 

} 

//456789 


// 定义 一 个 只 在 奇数 索引 值 产生 值 的 友 代 器 
arr[SymboL.iterator] = function*() { 
var idx = 1; 
do { 
yield this[idx]; 
} while ((idx += 2) < this.length); 
}; 


for (var v of arr) { 
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console.log( v ); 


//579 


7.3.2 Symbol.toStringTag 与 Symbol.hasInstance 
最 常见 的 一 个 元 编程 任务 ， 就 是 在 一 个 值 上 进行 内 省 来 找 出 它 是 什么 种 类 ， 这 通常 是 
为 了 确定 其 上 适合 执行 何 种 运算 。 对 于 对 象 来 说 ， 最 常用 的 内 省 技术 是 tostring() 和 


instanceof 。 





考虑 : 
function Foo() {} 
var a = new Foo(); 


a.toString(); // [object Object] 
a instanceof Foo; // true 


在 ES6 中 ， 可 以 控制 这 些 操作 的 行为 特性 : 
function Foo(greeting) { 
this.greeting = greeting; 
} 


Foo.prototype[Symbol.toStringTag] = "Foo"; 


Object.defineProperty( Foo, Symbol.hasInstance, { 
value: function(inst) { 


return inst.greeting == "hello"; 
} 
} ); 
var a = new Foo( "hello" )， 
b = new Foo( "world" ); 


b[Symbol.toStringTag] = "cool"; 


a.toString(); // [object Foo] 
String( b ); // [object cool] 
a instanceof Foo; // true 
b instanceof Foo; // false 


原型 (或 实例 本 身 ) 的 @@tostringTag 符号 指定 了 在 [object ___] 字符 串 化 时 使 用 的 字 
符 串 值 。 


@@hasInstance 符号 是 在 构造 器 函数 上 的 一 个 方法 ， 接 受 实例 对 象 值 ， 通 过 返回 true 或 
false 来 指示 这 个 值 是 否 可 以 被 认为 是 一 个 实例 。 
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要 在 一 个 函数 上 设 定 @@hasInstance， 必 须 使 用 0bject.defineProperty(..)， 
因为 Function.prototype 上 默认 的 那 一 个 是 writable: false (不 可 写 的 )。 
参见 本 系列 《你 不 知道 的 JavaScript (上 卷 )》 第 二 部 分 获取 更 多 信息 。 











7.3.3 Symbol.species 


在 3.4 市 中 ， 我 们 介绍 了 符号 @@species， 这 个 符号 控制 要 生成 新 实例 时 ， 类 的 内 置 方法 使 
用 哪 一 个 构造 器 。 





最 常见 的 例子 是 ， 在 创建 Array 的 子 类 并 想 要 定义 继承 的 方法 (比如 slice(..)) 时 使 用 
哪 一 个 构造 器 (是 Array(..) 还 是 自 定义 的 子 类 )。 上 默认 情况 下 ， 调 用 Array 子 类 实例 上 的 
slice(..) 会 创建 这 个 子 类 的 新 实例 ， 坦 白 说 这 很 可 能 就 是 你 想 要 的 。 








但 是 ， 你 可 以 通过 履 盖 一 个 类 的 默认 @@species 定义 来 进行 元 编程 : 
class Cool { 


// 把 @@species 推 迟到 子 类 
static get [Symbol.species]() { return this; } 


again() { 
return new this.constructor[Symbol.species](); 


} 
class Fun extends Cool {} 
class Awesome extends Cool { 


// 强制 指定 @@species 为 父 构造 器 
static get [Symbol.species]() { return Cool; } 


} 
var a = new Fun()， 

b = new Awesome(), 

Cc = a.again(), 

d = b.again(); 
c instanceof Fun; // true 
d instanceof Awesome;  // false 
d instanceof Cool; // true 


就 像 前 面 代 码 中 Cool 的 定义 那样 ， 内 置 原生 构造 器 上 Symbol.species 的 默认 行为 是 
return this。 在 用 户 类 上 没有 默认 值 ， 但 是 就 像 展 示 的 那样 ， 这 个 行为 特性 很 容易 模拟 。 




















如 果 需 要 定义 生成 新 实例 的 方法 ， 使 用 new this.constructor[Symbol.species](..) 模式 
元 编程 ， 而 不 要 硬 编码 new this.constructor(..) 或 new XYZ(..)。 然 后 继承 类 就 能 够 自 定 
义 Symbol.species 来 控制 由 哪个 构造 器 产生 这 些 实例 。 
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7.3.4 Symbol.toPrimitive 

在 本 系列 《你 不 知道 的 JavaScript (中 卷 )》 第 一 部 分 中 ， 我 们 讨论 了 抽象 类 型 转换 运算 
ToPrimitive， 它 用 在 对 象 为 了 某 个 操作 (比如 比较 == 或 者 相 加 +) 必须 被 强制 转换 为 一 个 
原生 类 型 值 的 时 候 。 在 ES6 之 前 ， 没 有 办 法 控制 这 一 行为 。 





而 在 ES6 中 ， 在 任意 对 象 值 上 作为 属性 的 符号 @@toPrimitivesymbol 都 可 以 通过 指定 一 个 
方法 来 定制 这 个 ToPrimitive 强制 转换 。 


考虑 : 
var arr = [1,2,3,4,5]; 
arr + 10; J/ L234,510 


arr[Symbol.toPrimitive] = function(hint) { 
if (hint == "default" || hint == "number") { 
// 求 所 有 数字 之 和 
return this.reduce( function(acc,curr){ 
return acC + CUrr; 
}; 0: ); 
} 
} 


arr + 10; // 25 
Symbol.toPrimitive 方 法 根据 调用 ToPrimitive 的 运算 期 望 的 类 型 ， 会 提供 一 个 提示 
(hint) 指定 "string"、"number" 或 "default”( 这 应 该 被 解释 为 "number")。 在 前 面 的 代码 
中 ， 加 法 + 运算 没有 提示 ( 传 入 "default")。 而 乘法 * 运算 提示 为 "number"，String(arr) 
提示 为 "string"。 





如 果 一 个 对 象 与 另 一 个 非 对 象 值 比较 ，== 运算 符 调 用 这 个 对 象 上 的 
ToPrimitive 方法 时 不 指定 提示 一 一 如 果 有 @@toPrimitive 方法 的 话 ， 调 用 时 
提示 为 "default"。 但 是 ， 如 果 比 较 的 两 个 值 都 是 对 象 ，== 的 行为 和 === 一 
样 ， 也 就 是 直接 比较 其 引用 。 这 种 情况 下 完全 不 会 调用 @@toPrimitive。 参 
见 本 系列 《你 不 知道 的 JavaScript (中 卷 )》 第 一 部 分 获取 关于 类 型 转换 和 抽 
象 运算 的 更 多 信息 。 


7.3.5 正则 表达 式 符 号 
对 于 正则 表达 式 对 象 ， 有 4 个 公开 符号 可 以 被 覆盖 ， 它 们 控制 着 这 些 正则 表达 式 在 4 个 对 
应 的 同名 String.prototype 国 数 中 如 何 被 使 用 。 




















。 @@match:， 正则 表达 式 的 Symbol.match 值 是 一 个 用 于 利用 给 定 的 正则 表达 式 匹 配 一 个 字 
符 串 值 的 部 分 或 全 部 内 容 的 方法 。 如 果 传 给 String.prototype.match(..) 一 个 正则 表达 
式 ， 那 么 用 它 来 进行 模式 匹配 。 
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ES6 规范 的 21.2.5.6 节 中 给 出 了 默认 匹配 算法 (https://people.mozilla.org/~jorendorff/es6- 
draft.html#sec-regexp.prototype-@@match)。 你 可 以 覆盖 这 个 默认 算法 并 提供 额外 的 正则 匹 
配 特 性 ， 比 如 向 后 断言 (look-behind assertion ) 。 


抽象 运算 isRegExp (参见 6.5.4 节 的 “警示 ”内 容 ) 也 使 用 了 Symbol.match， 来 确定 对 象 是 

会 被 用 作 正 则 表达 式 。 要 强制 使 得 某 个 对 象 上 的 这 个 检查 失败 ， 使 它 不 被 当 作 正 则 表达 
式 ， 可 以 把 Symbol.match 值 设置 为 false (或 者 任何 为 假 的 东西 )。* @@replace: 正则 表达 
式 的 Symbol.replace 值 是 一 个 方法 ，String.prototype.replace(..) 用 它 来 替换 一 个 字符 串 
内 匹配 给 定 的 正则 表达 式 模式 的 一 个 或 多 个 字符 序列 。 


ES6 规范 的 21.2.5.8 节 中 给 出 了 替换 的 默认 算法 (https://people.mozilla.org/~jorendorff/es6- 
draft.html#sec-regexp.prototype- @ @replace )。 


覆盖 默认 算法 的 一 个 很 棒 的 应 用 是 提供 额外 的 replacer 参数 选项 ， 比 如 通过 消耗 iterable 来 产 
生 连 续 禁 换 值 ， 支 持 "abaca" .replace(/a/g,[1,2,3]) 产生 "1b2c3" 这 样 的 形式 。* esearch: 正 
则 表达 式 的 Symbol.search 值 是 一 个 方法 ，String.prototype.search(..) 用 它 来 在 另 一 个 字符 串 
中 搜索 一 个 匹配 给 定 正则 表达 式 的 子 串 。 


ES6 规范 的 21.2.5.9 节 中 给 出 了 搜索 的 默认 算法 (https://people.mozilla.org/~jorendorff/es6- 
draft.html#sec-regexp.prototype-@@search)。* @@split: 正则 表达 式 的 Symbol.split 值 是 
一 个 方法 ，String.prototype.split(..) 用 它 把 字符 串 在 匹配 给 定 正则 表达 式 的 分 隔 符 处 
分 割 为 子 串 。 
ES6 规范 的 21.2.5.11 节 中 给 出 了 默认 的 分 割 算法 (https://people.mozilla.org/~jorendorff/es6- 
draft.htmj#sec-regexp.prototype-@@split) 。 

如 果 你 不 够 艺 高 人 胆 大 的 话 ， 就 不 要 履 盖 内 置 正 则 表达 式 算法 了 ! JavaScript 的 正则 表达 
式 引 擎 经 过 高 度 优 化 ， 所 以 你 自己 的 用 户 代 码 很 可 能 会 慢 上 许多 。 这 类 元 编程 简洁 强大 ， 
但 是 只 应 该 在 确实 需要 或 能 带 来 收益 的 时 候 才 使 用 。 







































































7.3.6 Symbol.isConcatSpreadable 


符号 @@isConcatSpreadable 可 以 被 定义 为 任意 对 象 《比如 数组 或 其他 可 友 代 对 象 ) 的 布尔 
型 属性 (Symbol.isConcatSpreadable)， 用 来 指示 如 果 把 它 传 给 一 个 数组 的 concat(..) 是 
否 应 该 将 其 展开 。 


考虑 : 























[4,233]; 
[4,5,6]; 


Var a = 
b = 


b[Symbol.isConcatSpreadable] = false; 


[].concat( a, b ); // [1,2,3,[4,5,6]] 
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7.3.7 Symbol.unscopables 


符号 @@unscopables 可 以 被 定义 为 任意 对 象 的 对 象 属性 (Symbol.unscopables)， 用 来 指示 
使 用 with 语句 时 哪些 属性 可 以 或 不 可 以 暴露 为 词法 变量 。 


考虑 : 


o[Symbol.unscopables] = { 
a: false, 
b: true, 
c: false 


本 


with (o) { 
console.log( a, b, c ); // 1 20 3 
} 


@@unscopables 对 象 中 的 true 表示 这 个 属性 应 该 是 unscopable 的 ， 因 此 会 从 词法 作用 域 变 
量 中 被 过 滤 出 去 。false 表示 可 以 将 其 包含 到 词法 作用 域 变量 中 。 





strict 模式 下 不 允许 with 语句 ， 因 此 应 当 被 认为 是 语言 的 过 时 特性 。 不 要 
使 用 它 。 参 见 本 系列 《你 不 知道 的 JavaScript (上 卷 )》 第 一 部 分 获取 更 多 信 
息 。 因 为 应 该 避免 使 用 with， 所 以 符号 @@unscopables 也 没有 太 大 意义 。 




















7.4 代理 
ES6 中 新 增 的 最 明显 的 元 编程 特性 之 一 是 Proxy (代理 ) 特性 。 


代理 是 一 种 由 你 创建 的 特殊 的 对 象 ， 它 “封装 ” 另 一 个 普通 对 企 这 个 普通 
对 象 的 前 面 。 你 可 以 在 代理 对 象 上 注册 特殊 的 处 理 函数 (也 就 是 tap), 代理 上 执行 各 种 
操作 的 时 候 会 调用 这 个 程序 。 这 些 处 理 函数 除了 把 操作 转发 给 原始 目标 / 被 封装 对 象 之 外 ， 
还 有 机 会 执行 额外 的 逻辑 。 


你 可 以 在 代理 上 定义 的 trap 处 理 函 数 的 一 个 例子 是 get， 当 你 试图 访问 对 象 属性 的 时 候 ， 
它 拦截 [[Get]] 运算 。 考 虑 : 


































































































var obj = { a: 1 }, 
handlers = { 
get(target,key,context) { 
// 注意 : target === obj， 
// context === pobj 
console.log( "accessing: ", key ); 
return Reflect.get( 
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target, key, context 
); 
= 
}， 
pobj = new Proxy( obj, handlers ); 


obj.a; 


// 1 


pobj.a; 
// accessing: a 


// 1 


我 们 在 handlers (Proxy(..) 的 第 二 个 参数 ) 对 象 上 声明 了 一 个 get(..) 处 理 国 数 命 名 方 
法 ， 它 接受 一 个 target 对 象 的 引用 (obj)、key 属性 名 ("a") 粗 体 文字 以 及 self/ 接收 者 / 
代理 (pobj)。 





在 跟踪 语句 console.log(..) 之后， 我 们 把 对 obj 的 操作 通过 Reflect.get(..)“ 转 发 ”。 
下 一 小 市 中 会 介绍 APIReflect， 这 里 只 要 了 解 每 个 可 用 的 代理 trap 都 有 一 个 对 应 的 同名 
Reflect 国 数 即 可 。 


这 里 的 映射 是 有 意 对 称 的 。 每 个 代理 处 理 函 数 在 对 应 的 元 编程 任务 执行 的 时 候 进 行 拦截 ， 
而 每 个 Reflect 工具 在 一 个 对 象 上 执行 相应 的 元 编程 任务 。 每 个 代理 处 理 函 数 都 有 一 个 自 
动 调用 相应 的 Reflect 工具 的 默认 定义 。 几 乎 可 以 确定 Proxy 和 Reflect 总 是 这 么 协同 工 
作 的 。 












































| 























下 面 所 列 出 的 是 在 目标 对 象 / 函数 代理 上 可 以 定义 的 处 理 函 数 ， 以 及 它们 如 何 / 何 时 被 触发 。 

















get(..) 
通过 [[Get]]， 在 代理 上 访问 一 个 属性 (Reflect.get(..)、. 属性 运算 符 或 [ .，] 属性 
运算 符 ) 

set(..) 
通过 [[Set]], 在 代理 上 设置 一 个 属性 值 (ReftLect.set(..)、 赋 值 运算 符 = 或 目标 为 对 
象 属性 的 解构 赋值 ) 





deLeteProperty(..) 


通过 [[DeLete]]， 从 代理 对 象 上 删除 一 个 属性 (RefLect.deLeteProperty(..) 或 
delete) 





apply(..) (如 果 目 标 为 函数 ) 
通过 [[catll]], 将 代理 作为 普通 函数 /方法 调用 (Reflect.apply(..)、call(..)、 
apply(..) 或 (..) 调用 运算 符 ) 
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construct(..) (如 果 目 标 为 构造 函数 ) 
通过 [[Construct]], 将 代理 作为 构造 函数 调用 (RefLect.construct(..) 或 new) 




















getOwnPropertyDescriptor(..) 


通过 [[GetownProperty]], 从 代理 中 提取 一 个 属性 描述 符 (0bject.getOwnPropertyDescriptor(..) 
或 Reflect.getOwnPropertyDescriptor(..)) 























defineProperty(..) 
通过 [[DefineOwnProperty]], 在 代理 上 设置 一 个 属性 描述 符 (0bject.defineProperty(..) 
或 RefLect.defineProperty(..)) 





getpPrototypeof(..) 
通过 [[GetPrototype0f]]， 得 到 代理 的 [[Prototype]] (Object.getPrototypeOf(..)、 
Ref lect.getPrototypeOf(..).、 Object#ispPrototype0f(..) 或 instanceof) 





proto_ 





ie 


setpPrototypeof(..) 
通过 [[SetPrototypeof]]， 设 置 代 理 的 [[Prototype]] (Object.setPrototypeof(..)、 
Reflect.setPrototype0f(..) 或 _proto_) 


preventExtensions(..) 


通过 [[PreventExtensions]]， 使 得 代理 变 成 不 可 扩展 的 (0bject.prevent Extensions(..) 
或 Reflect.preventExtensions(..)) 


isExtensible(..) 


通过 [[IsExtensible]]， 检 测 代 理 是 否 可 扩展 (0bject.isExtensible(..) 或 Reflect. 
isExtensible(..)) 


ownKeys(..) 
通过 [[OwnPropertyKeys]]， 提 取代 理 自己 的 属性 和 /或 符号 属性 (0bject.keys(..)、 
Object.getOwnPropertyNames(..) 























Object.getOwnSymbolProperties(..)、 Reflect. 


~ 


ownKeys(..) 或 JSON.stringify(..)) 


enumerate(..) 
通过 [[Enumerate]]， 取 得 代理 拥有 的 和 “继承 来 的 ”可 枚 举 属 性 的 迭代 器 (Reflect. 
enumerate(..) 或 for..in) 

has(..) 


通过 [[HasProperty]]， 检 查 代理 是 否 拥 有 或 者 “继承 了 ” 某 个 属 
0bject#hasOwnProperty(..) 或 "prop" in obj) 





隆 (RefLect.has(..)、 





图 灵 社 区 会 员 avilang(1985945885@qq.com) 专 享 尊重 版 权 





要 了 解 这 里 每 个 元 编程 任务 的 更 多 信息 ， 参 见 7.5 节 。 




















除了 上 面 列 出 的 会 触发 各 种 trap 的 动作 ， 某 些 trap 是 由 其 他 trap 的 默认 动作 间接 触发 的 。 
比如 : 


var handlers = { 
getOwnPropertyDescriptor(target,prop) { 
console. log( 
"getOwnPropertyDescriptor" 
); 
return Object.getOwnPropertyDescriptor( 
target, prop 
); 
}; 
defineProperty(target,prop,desc){ 
console.log( "definepProperty" ) ; 
return 0bject.defineProperty( 
target, prop, desc 
); 
} 
1 
proxy = new Proxy( {}, handlers ); 


proxy.a = 2; 
// getOwnPropertyDescriptor 
// defineProperty 


getOwnPropertyDescriptor(..) 和 defineProperty(..) 外 理 函 数 是 在 设 定 属性 值 (不 管 是 
新 增 的 还 是 更 新 已 有 的 ) 时 由 默认 set(..) 处 理 函 数 的 步 又 触发 的 。 如 果 你 也 自 定义 了 
set(..) 处 理 函数 ， 那 么 在 context (不 是 target | ) 上 可 以 (也 可 以 不 ) 进行 相应 的 调 
用 ， 这 些 调 用 会 触发 这 些 代理 trap。 



































7.4.1 代理 局 限 性 
可 以 在 对 象 上 执行 的 很 广泛 的 一 组 基本 操作 都 可 以 通过 这 些 元 编程 处 理 函 数 trap。 但 有 一 
些 操作 是 无 法 (至 少 现 在 ) 拦截 的 。 














比如 ， 下 面 这 些 操作 都 不 会 trap 并 从 代理 pobj 转发 到 目标 obj: 


var obj = { a:1, b:2 }, 
handlers = { .. }, 
pobj = new Proxy( obj, handlers ); 


typeof obj; 
String( obj ); 
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obj + ""; 
obj == pobj; 
obj === pobj 


也 许 在 未 来 ， 语 言 中 的 这 些 底层 基本 运算 可 能 会 有 更 多 变 成 可 拦截 的 ， 那 将 为 我 们 从 内 部 
扩展 JavaScript 提供 更 强大 的 能 








代理 处 理 函 数 总 会 有 一 些 不 变性 (invariant) ， 亦 即 不 能 被 覆盖 的 行为 。 比 
如 ，isExtensible(..) 处 理 函 数 的 返回 值 总 会 被 类 型 转换 为 boolean。 这 些 
不 变性 限制 了 自 定义 代理 行为 的 能 力 ， 但 它们 的 目的 只 是 为 了 防止 你 创建 
诡异 或 罕见 (或 者 不 一 致 ) 的 行为 。 这 些 不 变性 条 件 非常 复杂 ， 所 以 这 里 
我 们 不 会 完整 介绍 ， 这 篇 文章 (http:/www.2ality.com/2014/12/es6-proxies. 
html#invariants) 对 此 给 出 了 很 棒 的 介绍 。 























7.4.2 ”可 取消 代理 

普通 代理 总 是 陷入 到 目标 对 象 ， 并 且 在 创建 之 后 不 能 修改 一 一 只 要 还 保持 着 对 这 个 代理 的 引 
用 ， 代 理 的 机 制 就 将 维持 下 去 。 但 是 ， 可 能 会 存在 这 样 的 情况 ， 比 如 你 想 要 创建 一 个 在 你 想 
要 停止 它 作为 代理 时 便 可 以 被 停 用 的 代理 。 解 决 方案 是 创建 可 取消 代理 (revocable proxy) : 
























































var obj ={a: 1 }, 
handlers = { 
get(target,key,context) { 
// 注意 : target === obj， 
// context === pobj 
console.log( "accessing: ", key ); 
return target[key]; 





} 

]， 

{ proxy: pobj, revoke: prevoke } = 
Proxy.revocable( obj, handlers ); 


pobj .a; 
// accessing: a 


// 1 
// 然后 : 


prevoke(); 


pobj .a; 
// TypeError 


可 取消 代理 用 Proxy.revocable(..) 创建 ， 这 是 一 个 普通 函数 ， 而 不 像 Proxy(.…) 一 样 是 构 
造 器 。 除 此 之 外 ， 它 接收 同样 的 两 个 参数 : target 和 handlers。 


和 new Proxy(..) 不 一 样 ，Proxy.revocable(..) 的 返回 值 不 是 代理 本 身 。 而 是 一 个 有 两 个 
属性 proxy 和 revode 的 对 象 ， 我 们 使 用 对 象 解构 (参见 2.4 节 ) 把 这 两 个 属性 分 别 赋 











A 
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给 变量 pobj 和 prevoke()。 


一 旦 可 取消 代理 被 取消 ， 任 何 对 它 的 访问 (触发 它 的 任意 trap) 都 会 抛 出 TypeError。 











可 取消 代理 
模型 数据 ， 








的 一 个 可 能 应 用 场景 是 ， 在 你 的 应 用 中 把 代理 分 发 到 第 三 方 ， 其 中 管理 你 的 
而 不 是 给 出 真实 模型 本 身 的 引用 。 如 果 你 的 模型 对 象 改 变 或 者 被 奉 换 ， 就 可 





























以 使 分 发 出 去 的 代理 失效 ， 这 样 第 三 方 能 够 (通过 错误 ! ) 知晓 变化 并 请 求 更 新 到 这 个 
模型 的 引用 。 


7.4.3 











使 用 代理 


这 些 处 理 函 数 为 元 编程 带 来 的 好 处 是 显而易见 的 。 我 们 可 以 拦截 (并 覆盖 ) 对 象 的 几乎 所 


有 行为 ， 这 意味 着 我 们 可 以 以 强 有 力 的 方式 扩展 对 象 特性 超出 核心 JavaScript 内 容 。 这 里 








将 会 通过 几 种 模式 实例 来 探索 这 些 可 能 性 。 
1. 代理 在 先 ， 代 理 在 后 





我 们 在 前 本 








i 介绍 过 ， 通 常 可 以 把 代理 看 作 是 对 目标 对 象 的 “包装 *。 在 这 种 意义 上 ， 代 理 








成 为 了 代码 交互 的 主要 对 象 ， 而 实际 目标 对 象 保持 隐藏 / 被 保护 的 状态 。 


你 可 能 这 么 做 是 因为 你 想 要 把 对 象 传人 到 某 个 无 法 被 完全 “信任 ”的 环境 ， 因 此 需要 为 对 
它 的 访问 增强 规范 性 ， 而 不 是 把 对 象 本 身 传 人 。 


考虑 : 








var messages = []， 
handlers = { 


get(target,key) { 
// 字符 串 值 ? 
if (typeof target[key] == "string") { 
// 过 滤 掉 标点 符号 
return target[key] 
replace( /[^\w]/g, "" ); 


// 所 有 其 他 的 传递 下 去 


return target[key]; 





set(target,key,val) { 
// 设 定 唯一 字符 串 ， 改 为 小 写 
if (typeof val == "string") { 
val = val.toLowerCase(); 
if (target.indexOf( val ) == -1) { 
target.push( 
val.toLowerCase() 





) ; 
} 
} 


return true; 
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}， 


messages_proxy = 


new Proxy( messages, handlers ); 











// 其 他 某 处 : 


messages_proxy.push( 





"heLLo...", 42, "woOrlD!!", "WoRLd!!" 


); 


messages_proxy.forEach( function(val){ 


console. log(val); 


} ); 
// hello world 


messages.forEach( function(val){ 
console. log(val); 


}); 
// hello... world!! 


我 称 之 为 代理 在 先 (proxy first) 设计 ， 因 





为 我 们 首先 (主要 、 完 全 ) 与 代理 交互 。 


通过 与 messages_proxy 交互 来 增加 某 些 特殊 的 规则 ， 这 些 是 messages 本 身 没 有 的 。 我 们 
只 在 值 为 字符 串 并 且 是 唯一 值 的 时 候 才 添加 这 个 元 素 ， 我 们 还 将 这 个 值 变 为 小 写 。 在 从 
messages_proxy 提取 值 的 时 候 ， 我 们 过 滤 掉 了 字符 串 中 的 所 有 标点 符号 。 

另外 ， 我 们 也 可 以 完全 反 转 这 个 模式 ， 让 目标 与 代理 交流 ， 而 不 是 代理 与 目标 交流 。 这 
样 ， 代 码 只 能 与 主 对 象 交 互 。 这 个 回 退 方式 的 最 简单 实现 就 是 把 proxy 对 象 放 到 主 对 象 的 



































[[Prototype]] 链 中 。 


考虑 : 


var handlers = { 
get(target,key,context) { 
return function() { 
context.speak(key + 
}; 
} 
}， 


"1"); 


catchall = new Proxy( {}, handlers )， 


greeter = { 
speak(who = "someone") { 


console.log( "hello", who ); 


} 
}; 





// 设 定 greeter 回 退 到 catchalLL 


Object.setPrototypeOf( greeter, catchall ); 


greeter. speak(); // hello someone 
greeter .speak( "world" ); // hello world 
greeter .everyone(); // hello everyone! 
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这 里 直接 与 greeter 而 不 是 catchall 交流 。 当 我 们 调用 speak(..) 的 时 候 ， 它 在 greeter 
上 被 找到 并 直接 使 用 。 但 是 当 我 们 试图 访问 像 everyone() 这 样 的 方法 的 时 候 ， 这 个 函数 在 











greeter 上 并 不 存在 。 





默认 的 对 象 属性 行为 是 检查 [[Prototype]] 链 (参见 本 系列 《你 不 知道 的 JavaScript (上 
卷 )》 第 二 部 分 )， 所 以 会 查看 catchall 是 否 有 everyone 属性 。 然 后 代理 的 get() 处 理 函 








数 介 入 并 返回 一 个 用 访问 的 属性 名 ("everyone") 调用 speak(..) 的 函数 。 

















我 把 这 个 模式 称 为 代理 在 后 (proxy last) ， 因 为 在 这 里 代理 只 作为 最 后 的 保障 。 














2. "No Such Property/Method" 


有 一 个 关于 JavaScript 的 常见 抱怨 ， 在 你 试 着 访问 或 设置 一 个 还 不 存在 的 属性 时 ， 默 认 情 
况 下 对 象 不 是 非常 具有 防御 性 。 你 可 能 希望 预先 定义 好 一 个 对 象 的 所 有 属性 /方法 之 后 ， 





访问 不 存在 的 属性 名 时 能 够 抛 出 一 个 错误 。 




















我 们 可 以 通过 代理 实现 这 一 点 ， 代 理 在 先 或 代理 在 后 设计 都 可 以 。 两 种 情况 我 们 都 考虑 一 下 : 








var obj = { 
a 1 
foo() { 
console.log( "a:", this.a ); 
} 
]， 
handlers = { 
get(target,key,context) { 
if (Reflect.has( target, key )) { 
return Reflect.get( 
target, key, context 


); 
} 
else { 

throw "No such property/method!"; 
} 


}， 
set(target,key,val,context) { 
if (Reflect.has( target, key )) { 
return Reflect.set( 
target, key, val, context 
); 
} 
else { 
throw "No such property/method!"; 
} 
} 
]， 
pobj = new Proxy( obj, handlers ); 


pobj.a = 3; 
pobj.foo(); // a: 3 
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pobj.b = 4; // Error: No such property/method ! 
pobj.bar(); // Error: No such property/method ! 





对 于 get(..) 和 set(..)， 我们 都 只 在 目标 对 象 的 属性 存在 的 时 候 才 转发 这 个 操作 ， 否 则 抛 
出 错误 。 主 对 象 代码 应 该 与 代理 对 象 (pobj) 交流 ， 因 为 它 截获 这 些 动 作 以 提供 保护 。 











现在 ,考虑 转换 为 代理 在 后 设计 : 


var handlers = { 


get() { 
throw "No such property/method!"; 


和 
set() { 
throw "No such property/method!"; 
} 
和 
pobj = new Proxy( {}, handlers )， 
obj ={ 
a 
foo() { 
console.log( "a:", this.a ); 
} 
上 





// 设 定 obj 回 退 到 pob]j 
Object.setPrototypeOf( obj, pobj ); 


obj.a = 3; 

obj.foo(); // a: 3 

obj.b = 4; // Error: No such property/method! 
obj.bar(); // Error: No such property/method! 


考虑 到 处 理 函 数 的 定义 方式 ， 这 里 的 代理 在 后 设计 更 简单 一 些 














操作 并 且 只 在 目标 属性 存在 情况 下 才 转 发 不 同 ， 我 们 依赖 于 这 样 一 个 事实 : 如 果 [[Get]] 或 


[[Set]] 进入 我 们 的 pobj 回 退 ， 此 时 这 个 动作 已 经 遍历 了 整个 
现 匹 配 的 属性 。 这 时 候 我 们 可 以 自由 抛 出 错误 。 不 错 吧 ? 





3. 代理 hack [[Prototype]] 链 


。 与 截获 [[Get]] 和 [[Set]] 








[[Prototype]] 链 并 且 没 有 发 





[[Prototype]] 机 制 运作 的 主要 通道 是 [[Get]] 运算 。 当 直接 对 象 中 没有 找到 一 个 属性 的 时 





候 ，[[Get]] 会 自动 把 这 个 运算 转 给 [[Prototype]] 对 象 处 理 。 

















这 意味 着 你 可 以 使 用 代理 的 get(..) trap 来 模拟 或 扩展 这 个 [[P 











rototype]] 机 制 的 概念 。 


我 们 将 考虑 的 第 一 个 hack 就 是 创建 两 个 对 象 ， 通 过 [[Prototype]] 连 成 环 状 (或 者 ， 至 少 
看 起 来 是 这 样 ! )。 实 际 上 并 不 能 创建 一 个 真正 的 [[Prototype]] 环 ， 因 为 引擎 会 抛 出 错 





误 。 但 是 可 以 用 代理 模拟 ! 
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考虑 : 


var handlers = { 
get(target,key,context) { 
if (Reflect.has( target, key )) { 
return Reflect.get( 
target, key, context 


); 
} 
// 伪 环 状 [[Prototype]] 


else { 
return Reflect.get( 
target[ 
Symbol.for( "[[Prototypel]]" ) 
]， 
key， 
context 


} 
}, 


obj1 = new Proxy( 
name: "obj-1", 
foo() { 
console.log( "foo:", this.name ); 
} 


handlers )， 


obj2 = Object.assign( 
Object.create( obj1 )， 


{ 
name: "obj-2", 
bar() { 
console.log( "bar:", this.name ); 
this.foo(); 
} 
} 


) 


// 伪 环 状 [[Prototype]] 链 接 
obj1[ Symbol.for( "[[Prototype]]" ) ] = obj2; 


obj1.bar(); 
// bar: obj- 
// foo: obj- 


-- 通过 代理 伪装 [[Prototype]] 
- this 上 下 文 依然 保留 着 

















obj2.foo(); 
// foo: obj-2 <-- 通过 [[Prototype]] 








在 这 个 例子 中 ， 我 们 不 需要 代理 /转发 [[Set]]， 所 以 比较 简单 。 要 完整 模拟 
[[Prototype]]， 需 要 实现 一 个 set(..) 处 理 函 数 来 搜索 [[Prototype]] 链 寻 
找 匹 配 的 属性 ， 并 遵守 其 描述 符 特性 (比如 set， 可 写 的 )。 参 见 本 系列 《你 
不 知道 的 JavaScript (上 卷 )》 第 二 部 分 。 
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在 前 面 的 代码 中 ， 通 过 0bject.create(..) 语句 obj2 [[Prototype]] 链接 到 了 obj1。 而 为 
了 创建 反 向 ( 环 ) 的 链接 ， 我 们 在 obj1 符号 位 置 Symbol.for("[[Prototype]]") (参见 2.13 
节 ) 处 创建 了 属性 。 这 个 符号 可 能 看 起 来 有 点 特殊 /神奇 ,但 实际 上 并 非 如 此 。 它 只 是 给 
我 提供 了 一 个 方便 的 与 我 正在 执行 的 任务 关联 的 命名 钧 子 ， 以 便 语义 上 引用 。 


















































然后 ， 代 理 的 get(..) 处 理 函 数 首先 查看 这 个 代理 上 是 否 有 请 求 的 key。 如 果 没 有 ， 就 手 
动 把 这 个 运算 转发 给 保存 在 target 的 Symbol.for("[[Prototype]]") 位 置 中 的 对 象 引 用 。 

















这 种 模式 的 一 个 重要 优点 是 ，objl 和 objz 的 定义 几乎 不 会 受到 在 它们 之 间 建 立 的 
这 种 环 状 关 系 的 影响 。 尽 管 为 了 简洁 的 缘故 ， 前 面 代码 把 所 有 的 代码 都 纠缠 到 了 一 
起 ， 但 是 仔细 观察 可 以 看 到 ， 代 理 处 理 函 数 的 逻辑 完全 是 通用 的 (并 不 具体 了 解 
obj1 和 obj2 的 细节 )。 所 以 ， 这 段 逻辑 可 提取 出 来 封装 为 一 个 单独 的 辅助 函数 ， 比 如 
setCircularPrototype0f(..)。 我 们 把 这 个 实现 留 给 读者 作为 练习 。 





























既然 已 经 了 解 了 如 何 通过 get(..) 来 模拟 一 个 [[Prototype]] 链接 ， 现 在 让 我 们 来 深入 
hack 一 下 。 不 用 环 状 [[Prototype]]， 用 多 个 [[Prototype]] 链接 (也 就 是 “多 继承 ”) 怎 
么 样 ? 实际 上 这 非常 简单 直接 : 





var obj1 = { 
name: "obj-1", 
foo() { 
console.log( "obj1.foo:", this.name ); 
}， 
]， 
obj2 = 
name: "0bj-2", 
foo() { 
console.log( "obj2.foo:", this.name ); 
}， 
bar() { 
ConsoLe.Log( "obj2.bar:", this.name ); 
} 
]， 
handlers = { 


get(target,key,context) { 
if (Reflect.has( target, key )) { 
return Reflect.get( 
target, key, context 


) 


} 
// 伪装 多 个 [[Prototype]] 
else { 
for (var P of target[ 
Symbol.for( "[[Prototype]]" ) 
]) { 
if (Reflect.has( P, key )) { 
return Reflect.get( 
Pp, key, context 
); 
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} 
} 
} 
下 
obj3 = new Proxy( 
{ 
name: "obj-3", 
baz() { 
this.foo(); 
this.bar(); 
} 
}, 
handlers 


ys 


// 伪装 多 个 [[Prototype]] 链 接 

obj3[ Symbol.for( "[[Prototype]]" )]=[ 
obj1, obj2 

J; 


obj3.baz(); 
// obj1.foo: obj-3 
// obj2.bar: obj-3 


正如 前 面 环 状 [[Prototype]] 例子 之 后 的 注释 中 提 到 的 一 样 ， 我 们 没有 实现 
set(..) 处 理 函 数 ， 但 是 要 实现 一 个 完整 解决 方案 ， 模 拟 [[Set]] 动作 作为 
普通 的 [[Prototype]] 行为 是 必要 的 。 


obj3 建立 了 多 委托 到 objl 和 obj2。 在 obj3.baz() 中 ，this.foo() 调用 最 后 从 obj1 中 提出 
foo() ( 先 到 先 得 ， 虽 然 obj2 上 也 有 一 个 foo())。 如 果 我 们 把 链接 重新 排序 为 obj2、obj1， 
就 会 找到 并 使 用 obj2.foo()。 


























而 现在 this.bar() 调用 不 会 在 obj1 上 找到 bar()， 所 以 它 会 陷入 检查 obj2， 在 其 中 找 
到 匹配 。 











objl 和 obj2 表示 obj3 的 两 条 平行 的 [[Prototype]] 链 。objl 和 /或 obj2 本 身 也 可 以 
有 普通 的 [[Prototype]] 委托 到 其 他 对 象 ， 或 者 本 身 也 可 以 是 一 个 多 委托 的 代理 (就 像 
obj3 一 样 ) 。 


就 像 前 面 的 环 状 [[Prototype]] 链 例子 一 样 ，objl、obj2 和 obj3 的 定义 与 通用 的 处 理 多 委 
托 代理 的 逻辑 几乎 是 完全 分 离 的 。 要 定义 一 个 像 setPrototypesof(..) ( 广 意 这 个 表示 复数 
的 “s”) 这 样 的 工具 接收 一 个 主 对 象 和 一 个 对 象 列 表 来 模拟 多 [[Prototype]] 链接 是 很 简 
单 的 。 我 们 还 是 把 这 个 实现 留 给 读者 作为 练习 。 


希望 在 各 种 各 样 的 例子 之 后 代理 的 威力 现在 变 得 明朗 了 。 代 理 使 得 很 多 其 他 威力 强大 的 元 
编程 任务 成 为 可 能 。 
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7.5 Reflect API 
Reflect 对 象 是 一 个 平凡 对 象 (就 像 aath) ， 不 像 其 他 内 置 原生 值 一 样 是 函数 / 构造 器 。 


它 持 有 对 应 于 各 种 可 探 的 元 编程 任务 的 静态 函数 。 这 些 国 数 一 对 一 对 应 着 代理 可 以 定义 的 
处 理 函 数 方法 (trap ) 。 


这 些 函 数 中 的 一 部 分 看 起 来 和 0bject 上 的 同名 函数 类 似 : 





























。 Reflect.getOwnPropertyDescriptor(..); 
。 Reflect.definepProperty(..); 

。 Reflect.getPprototypeOf(..); 

。 Reflect.setPprototypeOf(..); 

。 Reflect.preventExtensions(..); 

。 Reflect.isExtensible(..), 

















一 般 来 说 这 些 工具 和 0bject.* 的 对 应 工具 行为 方式 类 似 。 但 是 ， 有 一 个 区 别 是 如 果 第 一 个 
参数 〈 目 标 对 象 ) 不 是 对 象 的 话 ，0bject.* 相应 工具 会 试图 把 它 类 型 转换 为 一 个 对 象 。 而 
这 种 情况 下 Reflect.* 方法 只 会 抛 出 一 个 错误 。 




















可 以 使 用 下 面 这 些 工 具 访 问 /查看 一 个 对 象 键 : 











Ref lect.ownKeys(..) 

返回 所 有 “拥有 ”的 (不 是 “继承 ”的 ) 键 的 列表 ， 就 像 0bject .getOwnPropertyNames 
(..) 和 0bject.getOwnPropertysymbols(..) 返回 的 一 样 。 关 于 键 的 顺序 参见 后 面 的 “ 属 
性 排序 ”一 节 。 


A 





Reflect.enumerate(..) 
返回 一 个 产生 所 有 (拥有 的 和 “继承 的 ”) 可 枚 举 的 (enumerable) 非 符 号 键 集 合 的 迭 
代 器 (参见 本 系列 《你 不 知道 的 JavaScript (上 卷 )》 第 二 部 分 )。 本 质 上 说 ， 这 个 键 的 
集合 和 foo. .in 循环 处 理 的 那个 键 的 集合 是 一 样 的 。 关 于 键 的 顺序 参见 后 面 的 “属性 排 
序 ” 一 节 。 

















RefLect.has(..) 
实质 上 和 in 运算 符 一 样 ， 用 于 检查 某 个 属性 是 否 在 某 个 对 象 上 或 者 在 它 的 
[[Prototype]] 链 上 。 比 如 ，Reflect.has(o,， "foo") 实质 上 就 是 执行 "foo" in o。 





函数 调用 和 构造 器 调用 可 以 通过 使 用 下 面 这 些 工具 手动 执行 ， 与 普通 的 语法 (比如 ,，(..) 
和 new) 分 开 : 
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Ref lect.apply(..) 
举例 来 说 ，Reflect.apply(foo,this0bj,[42,"bar"]) 以 this0bj 作为 this 调用 foo(..) 
函数 ， 传 入 参数 42 和 "bar"。 





Reflect.construct(..) 
举例 来 说 ，Reflect.construct(foo,[42,"bar"]) 实质 上 就 是 调用 new foo(42,"bar")。 


可 以 使 用 下 面 这 些 工具 来 手动 执行 对 象 属性 访问 、 设 置 和 删除 。 


Reflect.get(..) 
举例 来 说 ，Reflect.get(o,"foo") 提取 o.foo。 


Reflect.set(..) 
举例 来 说 ，Reflect.set(o,"foo",42) 实质 上 就 是 执行 0.foo = 42。 


Ref lect.deleteProperty(..) 
举例 来 说 ，Reflect.deleteProperty(o,"foo") 实质 上 就 是 执行 delete o.foo。 








Ref Lect 的 元 编程 能 力 提 供 了 模拟 各 种 语法 特性 的 编程 等 价 物 ， 把 之 前 隐藏 的 抽象 操作 暴 
露出 来 。 比 如 ， 你 可 以 利用 这 些 能 力 扩 展 功能 和 API， 以 实现 领域 特定 语言 (DSL)。 


属性 排序 

在 ES6 之 前 ， 一 个 对 象 键 /属性 的 列 出 顺序 是 依赖 于 具体 实现 ， 并 未 在 规范 中 定义 。 一 般 
来 说 ， 多 数 引擎 按照 创建 的 顺序 进行 枚 举 ， 虽 然 开发 者 们 一 直 被 强烈 建议 不 要 依赖 于 这 个 
顺序 。 











对 于 ES6 来 说 ， 拥 有 属性 的 列 出 顺序 是 由 [[0wnPropertyKeys]] 算法 定义 的 〈ES6 规范 ， 
9.1.12 节 )， 这 个 算法 产生 所 有 拥有 的 属性 (字符 串 或 符号 )， 不 管 是 否 可 枚 举 。 这 个 顺 
序 只 对 Reflect.ownKeys(..) (以 及 扩展 的 0bject.getOwnPropertyNames(..) 和 0bject. 
getOwnPropertySymbols(..)) 有 保证 。 


其 顺序 为 : 


(1) 首先 ， 按 照 数字 上 升 排序 ， 枚 举 所 有 整数 索引 拥有 的 属性 ， 
(2) 然后 ， 按 照 创建 顺序 枚 举 其 余 的 拥有 的 字符 串 属性 名 ， 
(3) 最 后 ， 按 照 创 建 顺 序 枚 举 拥有 的 符号 属性 。 


考虑 : 
































var 0 = {}; 


o[lSymbol("c")] = "yay"; 
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o[2] = true; 

o[1] = true; 

o.b = "awesome"; 

Od “E00L"; 

Reflect.ownKeys( 0 ); // [1,2,"b","a",Symbol(c)] 


Object .getOwnPropertyNames( 0 ); 1 TEL2 Da 可 
Object.getOwnPropertySymbols( o ); // [Symbol(c)] 





另 一 方面 ，[[Enumerate]] 算法 (ES6 规范 ，9.1.11 节 ) 只 从 目标 对 象 和 它 的 [[Prototype]] 
链 产 生 可 枚 举 属性 。 它 用 于 Reflect.enumerate(..) 和 for..in。 可 以 观察 到 的 顺序 和 具体 
的 实现 相关 ， 不 由 规范 控制 。 














与 之 对 比 ，0bject.keys(..) 调用 [[OwnPropertyKeys]] 算法 取得 拥有 的 所 有 键 的 列表 。 但 
是 ， 它 会 过 滤 掉 不 可 枚 举 属性 ， 然 后 把 这 个 列表 重新 排序 来 遵循 遗留 的 与 实现 相关 的 行 
为 特性 ， 特 别 是 JSON.stringify(..) 和 for..in。 因 此 通过 扩展 ， 这 个 顺序 也 和 Reflect. 
enumerate(..) 顺序 相 匹 配 。 


换 名 话说， 所 有 这 4 种 机 制 (RefLect.enumerate(..)、0bject.keys(..)、for..in 和 JSON. 
stringify(..)) 都 会 匹配 同样 的 与 具体 实现 相关 的 排序 ， 尽 管 严格 上 说 是 通过 不 同 的 路 径 。 


把 这 4 种 机 制 与 [[0wnPropertyKeys]] 的 排序 匹配 的 具体 实现 是 允许 的 ， 但 并 不 是 必须 的 。 
尽管 如 此 ， 你 很 可 能 会 看 到 它们 的 排序 特性 是 这 样 的 : 


Vat oO"= {3 1, bi 2 二 

var p = Object.create( o ); 
p.C = 3; 

Ps 人 二 < 


for (var prop of Reflect.enumerate( p )) { 
console.log( prop ); 


//cdab 


for (var prop in p) { 
console.log( prop ); 


} 
//cdab 


JSON.stringify( p ); 
// {"c":3,"d":4} 


Object.keys( p ); 
NY evs di 


总 结 一 下 : 对 于 ES6 来 说 ，Reflect.ownKeys(..)、0bject.getOwnPropertyNames(..) 和 
0bject.getOwnPropertysymbols(..) 的 顺序 都 是 可 预测 且 可 靠 的 ， 这 由 规范 保证 。 所 以 依 
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赖 于 这 个 顺序 的 代码 是 安全 的 。 


Reflect .enumerate(..)、0bject.keys(..) 和 for..in (以 及 扩展 的 JSON.stringification(..)) 
还 像 过 去 一 样 ， 可 观察 的 顺序 是 相同 的 。 但 是 这 个 顺序 不 再 必须 与 Reflect.ownKeys(..) 相 
同 。 在 使 用 它们 依赖 于 具体 实现 的 顺序 时 仍然 要 小 心 。 


7.6 ”特性 测试 

什么 是 特性 测试 ?就 是 一 种 由 你 运行 的 用 来 判断 一 个 特性 是 否 可 用 的 测试 。 有 时 候 ， 这 个 
测试 不 只 是 为 了 测试 特性 是 否 存在 ， 还 是 为 了 测试 特性 是 否 符合 指定 的 行为 规范 一 一 特性 
可 能 存在 但 却 是 有 问题 的 。 

测试 程序 的 运行 环境 ， 然 后 确定 程序 行为 方式 ， 这 是 一 种 元 编程 技术 。 

JavaScript 中 最 常用 的 特性 测试 是 检查 一 个 API 是 否 存 在 ， 如 果 不 存在 的 话 ， 定 义 一 个 
polyfill (参见 第 1 章 )。 比 如 : 





if (!Number.isNaN) { 
Number .isNaN = function(x) { 
return x !== x; 
}: 
} 


这 段 代 码 中 的 if 语句 是 元 编程 : 我 们 检查 程序 和 它 的 运行 环境 ， 以 此 来 确定 是 否 应 该 继 
续 以 及 如 何 继续 。 











但 是 如 何 测试 涉及 新 语法 的 特性 呢 ? 
可 能 你 会 想到 使 用 像 下 面 这 样 的 代码 : 


try { 
a= () => {}; 
ARROW_FUNCS_ENABLED = true; 
} 
catch (err) { 
ARROW_FUNCS_ENABLED = false; 
} 


不 幸 的 是 ， 这 行 不 通 ， 因 为 我 们 的 JavaScript 程序 是 需要 编译 的 。 所 以 ， 如 果 引 擎 还 不 支 
持 ES6 箭头 函数 的 话 ， 就 会 停 在 () => 人 语法 处 。 这 样 你 程序 中 的 一 个 语法 错误 会 使 其 
无 法 运行 ， 你 的 程序 也 就 无 法 根据 特性 是 否 被 支持 而 作出 不 同 的 反应 。 

要 针对 语法 相关 的 特性 进行 特性 测试 的 元 编程 ， 我 们 需要 一 种 方法 能 够 把 测试 与 程序 的 初 
始 编译 步骤 隔绝 开 来 。 比 如 ， 如 果 我 们 可 以 把 测试 代码 放 在 一 个 字符 串 里 ， 那 么 JavaScript 
引擎 默认 就 不 会 试图 编译 这 个 字符 串 的 内 容 ， 直 到 要 求 它 这 么 做 。 
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我 们 直接 跳 到 使 用 eval(..) 怎么 样 ? 


还 没 那 么 快 ， 参见 本 系列 《你 不 知道 的 JavaScript (上 卷 )》 第 一 部 分 ， 其 中 介绍 了 为 什么 
eval(..) 不 是 一 个 好 主意 。 但 是 还 有 一 种 缺点 少 一 些 的 选择 : Function(..) 构造 器 。 


考虑 : 

















try { 
new Function( "( () => {} )" ); 
ARROW_FUNCS_ENABLED = true; 


catch (err) { 
ARROW_FUNCS_ENABLED = false; 
} 


好 吧 ， 现 在 我 们 就 是 在 通过 元 编程 确定 像 箭 头 国 数 这 样 的 特性 是 否 能 在 当前 引擎 上 编译 。 
你 可 能 会 想 知 道 ， 拿 到 了 这 个 信息 又 能 做 什么 呢 ? 
有 了 API 的 存在 性 检查 ， 并 且 定 义 了 用 作 退 路 的 API polyfill， 那 么 测试 成 功 和 失败 后 的 路 


径 是 很 清晰 的 。 但 是 知道 了 ARROW_FUNCS_ENABLED 为 true 还 是 false 这 个 信息 之 后 又 能 做 
什么 呢 ? 

















引擎 不 支持 的 语法 特性 不 能 出 现在 一 个 文件 中 ， 因 此 ， 不 能 在 这 个 文件 中 分 别 使 用 或 是 不 
使 用 这 个 语法 定义 不 同 的 函数 。 


尔 能 做 的 是 ， 使 用 这 个 测试 来 确定 应 该 加 载 一 组 JavaScript 文件 中 的 哪 一 个 。 举 例 来 
说 ， 如 果 在 你 的 JavaScript 应 用 程序 的 引导 程序 (bootstrapper) 中 有 一 组 这 样 的 特性 测 
试 ， 就 可 以 通过 测试 环境 来 确定 你 的 ES6 代码 是 能 够 直接 加 载运 行 ， 还 是 需要 加 载 代码 的 
transpile 版 本 (参见 第 1 章 )。 


这 种 技术 叫 作 分 批发 布 (split delivery ) 。 


事实 表明 ， 有 时 候 你 的 ES6 JavaScript 程序 能 够 完整 “原生 ”运行 在 ES6+ 浏览 器 中 ， 但 有 
时 候 又 需要 transpilation 运行 在 前 ES6 浏览 器 中 。 如 果 总 是 加 载 使 用 transpile 的 代码 ， 甚 至 
在 新 的 ES6 兼容 环境 中 也 是 这 样 ， 那 么 至 少 有 时 候 是 在 运行 非 优化 的 代码 。 这 并 不 理想 。 


分 批发 布 更 复杂 也 更 高 级 ， 但 它 是 一 种 更 成 熟 、 更 健壮 的 方法 ， 可 以 弥合 代码 编写 和 程序 
运行 浏览 器 支持 的 特性 之 间 的 裂 际 。 







































































FeatureTests.io 

为 所 有 ES6+ 语法 和 语义 行为 特性 定义 特性 测试 ， 可 能 是 你 并 不 想 亲 自动 手 的 令 人 望 而 
却步 的 工作 。 因 为 这 些 测试 需要 动态 编译 (new Function(..))， 所 以 会 有 一 些 不 幸 的 性 
能 损失 。 
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另外 ， 每 次 程序 运行 的 时 候 都 要 运行 这 些 测试 可 能 也 是 一 种 浪费 ， 因 为 一 般 用 户 浏览 器 最 
多 也 只 是 几 个 星期 才 更 新 一 次 ， 即 便 如 此 ， 也 不 是 每 次 更 新 都 会 出 现 新 特性 。 


最 后 ， 管 理应 用 到 具体 代码 的 特性 测试 列表 也 是 容易 失控 和 出 错 的 一 一 你 的 程序 几乎 不 会 
使 用 所 有 ES6 特性 。 





























FeatureTests.io (https://featuretests.io) 为 此 提供 了 解决 方案 。 


你 可 以 在 自己 的 页 面 中 加 载 这 个 服务 库 ， 然 后 它 会 加 载 最 新 的 测试 定义 并 运行 所 有 特性 测 
试 。 如 果 可 能 的 话 ， 就 使 用 Web Worker 的 后 台 进程 实现 这 些 ， 以 减少 性 能 损失 。 它 还 会 
使 用 LocalStorage 持久 存储 缓存 结果 ， 并 且 其 实现 方式 使 得 你 访问 的 所 有 使 用 这 个 服务 的 
站 点 都 可 以 共享 缓存 ， 这 显著 降低 了 每 个 浏览 器 实例 上 运行 这 些 济 试 的 所 需 频 率 。 
































这 样 你 得 到 了 每 个 用 户 浏 览 器 的 运行 时 特性 测试 ， 然 后 就 可 以 巧妙 使 用 这 些 测 试 结果 根据 
用 户 的 环境 为 用 户 提供 最 合适 的 代码 (不 多 也 不 少 )。 


另外 ， 这 个 服务 提供 了 工具 和 API 来 扫描 你 的 文件 以 确定 需要 哪些 特性 ， 所 以 你 可 以 完全 
自动 化 分 批发 布 构建 过 程 。 


FeatureTests.io 使 得 应 用 所 有 ES6 及 之 后 的 特性 测试 ， 确 保 在 给 定 的 环境 中 只 加 载运 行 最 
优 代 码 成 为 可 能 





7.7 尾 递 归 调 用 (Tail Call Optimization,TCO) 


通常 ， 在 一 个 函数 内 部 调用 另 一 个 函数 的 时 候 ， 会 分 配 第 二 个 栈 帧 来 独立 管理 第 二 个 函数 
调用 的 变量 / 状态 。 这 个 分 配 不 但 消耗 处 理 时 间 ， 也 消耗 了 额外 的 内 存 。 


通常 调用 栈 链 最 多 有 10~15 个 从 一 个 函数 到 另 一 个 函数 的 跳 转 。 这 种 情况 下 ， 内 存 使 用 并 
会 造成 任何 实际 问题 。 


但 是 ， 当 考虑 到 递归 编程 的 时 候 (一 个 函数 重复 调用 自身 ) 个 函数 彼此 
调用 形成 北上 达到 成 百 上 千 ， 甚 至 更 多 。 如 有 果 内 存 的 使 用 无 限制 
地 增长 下 去 ， 你 可 能 看 到 了 它 将 导致 的 问题 。 


JavaScript 引 获 不 得 不 设置 一 个 武断 的 限制 来 防止 这 种 编程 技术 引起 浏览 器 和 设备 内 存 耗 
尽 而 月 涡 。 这 也 是 为 什么 达到 这 个 限制 的 时 候 我 们 会 得 到 烦人 的 “RangeError: Maximum 


call stack size exceeded” 。 







































































调用 栈 深度 限制 不 由 规范 控制 。 它 是 依赖 于 具体 实现 的 ， 并 且 根 据 浏览 器 和 
设备 不 同 而 有 所 不 同 。 在 编码 的 时 候 不 要 对 观察 到 的 具体 限制 值 有 任何 强 假 
定 ， 因 为 它 很 可 能 根据 发 布 版 本 的 不 同 而 有 所 不 同 。 
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有 一 些 称 为 尾 调 用 (tail call) 的 函数 调用 模式 ， 可 以 以 避免 额外 栈 帧 分 配 的 方式 进行 优 
化 。 如 果 可 以 避免 额外 的 分 配 ， 就 没有 理由 任意 限制 调用 栈 深 度 ， 所 以 引擎 就 可 以 不 设置 
这 个 限制 。 














尾 调用 是 一 个 return 函数 调用 的 语句 ， 除 了 调用 后 返回 其 返回 值 之 外 没有 任何 其 他 动作 。 


这 个 优化 只 在 strict 模式 下 应 用 。 这 又 是 一 个 要 坚持 编写 strict 模式 代码 的 原因 ! 





下 面 是 一 个 不 在 尾 位 置 的 函数 调用 : 











"Use strict"; 


function foo(x) { 
return x * 2; 


} 


function bar(x) { 
// 这 不 是 尾 调用 


return 1 + foo( x ); 

















} 


bar( 10 ); /1/21 


foo(x) 调用 完毕 后 还 得 执行 1 + ..， 所 以 bar(.…) 调用 的 状态 需要 被 保留 。 














但 下 面 代码 展示 的 对 foo(..) 和 bar(..) 的 调用 都 处 于 尾 位 置 ， 因 为 它们 是 在 其 代码 路 径 
上 发 生 的 最 后 一 件 事 (除了 return) : 








"Use strict"; 


function foo(x) { 
return x * 2; 


} 
function bar(x) { 
X=X+ 1; 
if (x > 10) { 
return foo( x ); 
else { 
return bar( x + 1 ); 
} 
3 
bar( 5 ); // 24 
bar( 15 ); // 32 





在 这 个 程序 中 ，bar(..) 显然 是 递归 ， 而 foo(..) 只 是 一 个 普通 函数 调用 。 在 这 两 种 情况 
下 ， 函 数 调 用 都 处 于 合适 的 尾 位 置 (proper tail position)。x + 1 在 bar(..) 调用 之 前 求 值 
在 调用 结束 后 ， 所 做 的 只 有 return。 




















A 
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这 些 形式 的 正确 尾 调用 (Proper Tail Call，PTC) 是 可 以 被 优化 的 称 为 尾 调用 优化 
(Tail Call Optimization，TCO) 一 一 于 是 额外 的 栈 帧 分 配 是 不 需要 的 。 引 擎 不 需要 对 下 一 
个 函数 调用 创建 一 个 新 的 栈 帧 ， 只 需 复 用 已 有 的 栈 帧 。 这 能 够 工作 是 因为 一 个 函数 不 需要 
保留 任何 当前 状态 一 一 在 PTC 之 后 不 需要 这 个 状态 做 任何 事情 。 


TCO 意味 着 对 调用 栈 的 允许 深度 没有 任何 限度 。 对 于 一 般 程序 中 的 普通 函数 调用 ， 这 个 技 
巧 有 些许 优化 ， 但 更 重要 的 是 打开 了 在 程序 表达 中 使 用 递归 的 大 门 ， 甚 至 是 调用 栈 的 调用 
这 度 可 能 达到 成 千 上 万 的 时 候 。 























现在 我 们 不 再 只 把 递归 作为 解决 问题 的 理论 方案 了 ， 而 是 可 以 实际 将 其 用 在 JavaScript 程 
序 中 ! 


对 于 ES6 来 说 ， 不 管 是 否 为 递 腿 ， 所 有 的 PTC 都 应 该 以 这 种 方式 优化 。 











7.7.1 尾 调用 重 写 
但 这 里 的 问题 是 只 有 PTC 可 以 被 优化 ; 非 PTC 当然 仍然 可 以 工作 ， 但 会 像 以 前 一 样 触发 
栈 帧 分 配 。 如 果 你 希望 这 个 优化 介入 的 话 ， 需 要 认真 设计 函数 结构 支持 PTC。 


如 果 有 一 个 函数 不 是 以 PTC 方式 编写 的 ， 那 么 你 可 能 会 需要 手动 重新 安排 代码 以 适合 
TCO。 


考虑 : 


























"use strict"; 
function foo(x) { 


if (x <= 1) return 1; 
return (x / 2) + foo( x - 1 ); 


foo( 123456 ); // RangeError 

















调用 foo(x-1) 不 是 PIC， 因 为 它 的 结果 每 次 在 return 之 前 要 加 上 (x / 2)。 








但 是 ， 要 想 使 这 段 代 码 适 合 ES6 引擎 TCO， 可 以 这 样 重 写 : 





"use strict"; 


var foo = (function(){ 
function _foo(acc,x) { 
if (x <= 1) return acc; 
return _foo( (x / 2) + acc, x - 1 ); 


} 


return function(x) { 
return _foo( 1, x ); 
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}; 
])(); 


foo( 123456 ); // 3810376848.5 


如 有 果 你 在 实现 了 TCO 的 ES6 引擎 中 运行 前 面 的 代码 ， 会 得 到 如 前 显示 的 3810376848.5。 
然而 ， 它 在 非 TCO 引擎 里 仍然 会 因 RangeError 而 失败 。 








7.7.2 非 TCO 优化 
还 有 几 种 其 他 技术 可 以 用 来 重 写 代码 ， 使 得 不 需要 每 次 调用 时 都 增长 栈 。 





其 中 一 种 这 样 的 技术 叫 作 trampolining， 它 相当 于 把 每 个 部 分 结果 用 一 个 国 数 表示 ， 这 些 
国 数 或 者 返回 另外 一 个 部 分 结果 国 数 ， 或 者 返回 最 终结 果 。 然 后 就 只 需要 循环 直到 得 到 的 
结果 不 是 函数 ， 得 到 的 就 是 最 终结 果 。 


考虑 : 














"use strict"; 


function trampoline( res ) { 
while (typeof res == "function") { 
res = res(); 
} 
return res; 


} 


var foo = (function(){ 
function _foo(acc,x) { 
if (x <= 1) return acc; 
return function partial(){ 
return _foo( (x / 2) + acc, x - 1 ); 
}; 
下 


return function(x) { 
return trampoline( _foo( 1, x ) ); 


由 
DO; 


foo( 123456 ); // 3810376848.5 








这 个 重 写 需 要 最 小 的 改动 来 把 递归 转化 为 trampoline(..) 中 的 循环 。 











(1) 首先 ， 把 return _foo .. 一 行 封装 在 return partiaL() { .. 函数 表达 式 中 。 
(2) 然 后 ， 把 _foo(1,x) 调用 封装 在 trampoline(..) 调用 中 。 


这 个 技术 不 限制 调用 栈 的 原因 是 ， 每 个 内 部 的 partiaL(..) 国 数 只 是 返回 到 
trampoline(..) 的 while 循环 中 ，trampolining 运行 函 数 并 进行 下 一 次 的 循环 友 代 。 换 句 话 
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说 ，partial(..) 不 会 递归 调用 自身 ， 它 只 是 返回 另 一 个 函数 。 栈 深度 保持 不 变 ， 所 以 可 
以 运行 任意 长 的 时 间 。 





通过 这 种 方式 实现 的 trampolining 使 用 了 内 层 partial() 函数 在 变量 x 和 acc 上 的 闭 包 ， 
在 迭代 之 间 保 持 状态 。 其 优点 是 把 循环 逻辑 抽出 到 了 可 复 用 的 trampoline(..) 工具 图 
数 ， 很 多 库 都 提供 了 它 的 各 种 版 本 。 可 以 在 你 的 程序 中 用 不 同 的 trampoline 算法 多 次 复 用 


trampoLine(..)。 

















当然 ， 如 果真 的 需要 深度 优化 (不 需 考 虑 可 复 用 性 )， 那 么 可 以 丢弃 闭 包 状 态 ， 用 一 个 循 
环 把 acc 信息 的 状态 追踪 在 线 化 放 在 一 个 函数 作用 域内 。 这 种 技术 一 般 称 为 递归 展开 : 





"Use strict"; 


function foo(x) { 
Var acCc = 1; 
while (x > 1) { 
acC = (x / 2) + acc; 


X= X13 
} 
return acc; 
} 
foo( 123456 ); // 3810376848.5 


算法 的 这 种 表达 方式 可 读 性 更 高 ， 很 可 能 也 是 我 们 前 面 探 索 的 各 种 形式 中 性 能 (严格 说 
来 ) 最 高 的 。 所 以 这 个 方案 显然 是 最 好 的 ， 你 可 能 会 奇怪 为 什么 还 要 用 其 他 方法 。 


下 面 是 两 个 使 我 们 并 不 想 总 是 手动 展开 递归 的 原因 。 




















。 这 里 没有 为 了 可 复 用 性 把 trampolining (循环 ) 逻辑 提取 出 来 ， 而 是 将 它 在 线 化 了 。 在 
只 需要 考虑 一 个 例子 的 时 候 这 还 合适 ， 但 如 果 你 的 程序 中 有 多 个 这 种 情况 ， 很 可 能 需要 
提高 复 用 度 来 保持 代码 更 简短 、 更 易 管理 。 

。 这 里 的 例子 非常 简单 ， 只 是 用 来 展示 各 种 不 同 的 形式 。 但 在 实践 中 ,递归 算法 中 还 有 很 
多 更 复杂 的 逻辑 ， 比 如 互相 递归 (不 只 一 个 函数 调用 自身 )。 




















对 这 个 无 底 洞 探索 越 深 ， 就 会 发 现 展开 优化 变 得 越 手动 化 和 错综复杂 。 你 很 快 就 会 去 失 所 
有 前 面 得 到 的 可 读 性 价值 。 递 归 的 最 主要 优势 ， 即 使 是 PTC 形式 ， 就 是 它 保留 了 算法 的 可 
读 性 ， 并 将 性 能 优化 的 担子 扔 给 引擎。 

















如 果 以 PTC 的 形式 编写 算法 ，ES6 引擎 就 会 应 用 TCO， 代 码 就 会 以 常数 栈 深 度 (通过 重 
用 栈 帧 ) 运行 。 你 在 得 到 递归 的 可 读 性 的 同时 ， 也 得 到 了 几乎 没有 损失 的 性 能 以 及 不 受 限 
制 的 运行 长 度 。 
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7.7.3 元 在 何 处 


TCO 和 元 编程 又 有 什么 关系 呢 ? 





正如 我 们 在 7.6 节 中 介绍 的 ， 可 以 在 运行 时 判断 引 警 支持 哪 些 特性 。 其 中 就 包括 TCO， 尽 
管 确定 方法 是 十 分 暴力 的 。 考 虑 : 


"use strict"; 


try { 
(function foo(x){ 
if (x < 5E5) return foo( x + 1 ); 
有 工人 3 


TCO_ENABLED = true; 
} 


catch (err) { 
TCO_ENABLED = false; 


在 非 TCO 引 敬 中， 递归 循环 最 终 会 失败 ， 抛 出 一 个 异常 被 try..catch 捕 歼 。 换 句 话说 ， 
有 了 TCO， 循 环 才能 完成 。 























不 怎么 样 ， 对 吧 ? 





而 围绕 着 TCO 特性 (或 者 ， 这 个 特性 的 缺失 ) 的 元 编程 对 我 们 的 代码 有 什么 好 处 呢 ? 简 
单 的 答案 是 ， 可 以 通过 这 种 特性 测试 来 决定 是 加 载 使 用 递归 的 应 用 代码 版 本 ， 还 是 转换 / 
transpile 为 不 需要 递归 的 版 本 。 


自 适应 代码 
还 有 另外 一 种 看 问题 的 方式 : 











"use strict"; 


function foo(x) { 
function _foo() { 
if (x > 1) { 
acC = acc + (x / 2); 
XE =X 
return _foo(); 


J 
var acc = 1; 


while (x > 1) { 


catch (err) {} 





A 
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} 


return acc; 


foo( 123456 ); // 3810376848.5 
这 个 算法 尽 可 能 多 地 使 用 了 递归 ,但 是 是 通过 作用 域内 变量 x 和 acc 保持 进展 状态 。 如 采 


整个 问题 都 可 以 不 出 错 地 通过 递归 人 解决， 那么 很 好 。 如 果 引 擎 在 某 处 杀 死 了 递归 ， 我 们 就 
会 在 try. .catch 中 捕获 到 ， 然 后 再 试 一 次 ， 继 续 我 们 其 余 的 工作 。 








我 把 这 种 形式 看 作 是 一 种 元 编程 ， 理 由 是 在 运行 时 探索 引擎 的 能 力 来 (递归 地 ) 完成 任 
务 ,， 并 且 为 可 能 的 ( 非 TCO) 引擎 局 限 提供 了 替代 版 本 。 

第 一 眼 (甚至 第 二 眼 ! ) 看 上 去 ,我 埃 说 比 起 前 面 的 几 个 版 本 ， 你 会 觉得 这 段 代码 要 丑陋 
许多 。 运 行 起 来 它 也 要 慢 得 多 (在 非 TCO 环境 中 大 量 运 行 的 情况 下 )。 

这 个 对 递归 栈 限制 的 “解决 方案 ”的 主要 优点 ， 除 了 即使 在 非 TCO 引擎 中 也 能 够 完成 任 
意 规 模 的 任务 之 外 ， 就 是 比 前 面 展 示 的 trampolining 技术 和 手动 展开 技术 更 灵活 。 


本 质 上 说 ， 这 个 例子 中 的 -foo() 可 以 替换 为 几乎 任意 递归 任务 ， 即 使 是 互相 递归 。 其 余部 
分 是 任何 算法 都 适用 的 样板 。 












































唯一 的 “catch” 是 为 了 能 够 在 递归 达到 限制 的 时 候 恢 复 ， 递 归 的 状态 必须 要 用 递归 函数 之 
外 的 作用 域 变量 维护 。 我 们 通过 把 x 和 acc 放 在 _foo() 函数 之 外 ， 而 不 是 像 之 前 一 样 把 它 
们 作为 参数 传递 给 _foo() 来 实现 这 一 点 。 


几乎 所 有 递归 算法 都 可 以 被 改造 为 用 这 种 方式 工作 。 这 意味 着 这 是 在 你 的 程序 中 进行 最 小 
重 写 就 能 利用 TCO 递归 的 最 广泛 的 可 行 方法 。 


这 种 方法 也 使 用 了 PTC， 意 味 着 从 旧 有 浏览 器 中 使 用 多 次 人 循环 (递归 批 处 理 
ES6+ 环境 中 充分 利用 TCO 的 递归 ， 这 段 代 码 将 会 得 到 显著 提高 。 我 认为 这 很 栈 ! 




















— 


运行 到 





7.8 小结 

元 编程 是 指 把 程序 的 逻辑 转向 关注 自身 (或 自身 的 运行 时 环境 ) ， 要 么 是 为 了 查看 自己 
的 结构 ， 要 么 是 为 了 修改 它 。 元 编程 的 主要 价值 是 扩展 语言 的 一 般 机 制 来 提供 额外 的 
新 功能 。 








在 ES6 之 前 ，JavaScript 已 经 有 了 不 少 的 元 编程 功能 ， 而 ES6 提供 了 几 个 新 特性 ， 显 著 提 
高 了 元 编程 能 力 。 








从 匿名 函数 的 函数 名 推导 ， 到 提供 了 构造 器 调用 方式 这 样 的 信息 的 元 属性 ， 你 可 以 比 过 
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去 更 深入 地 查看 程序 运行 时 的 结构 。 通 过 公开 符号 可 以 覆盖 原本 特性 ， 比 如 对 象 到 原生 





类 型 的 类 型 转换 。 代 到 
模拟 它们 。 





特性 测试 ， 甚 至 可 以 测 


可 以 拦截 并 自 定义 对 象 的 各 种 底层 操作 ，ReftLect 提供 了 工具 来 


试 像 尾 递归 优化 这 样 微妙 的 语义 特性 ， 把 元 编程 的 焦点 从 你 的 程序 














转移 到 JavaScript 引擎 功能 本 身 。 通 过 更 多 地 了 解 环境 能 力 ， 你 的 程序 可 以 在 运行 时 调整 


自己 达到 最 优 效果 。 
应 该 使 用 元 编程 吗 ? 我 








的 建议 是 : 首先 应 将 重点 放 在 了 解 这 个 语言 的 核心 机 制 到 底 是 如 何 





工作 的 。 而 一 旦 你 真正 了 解 了 JavaScript 本 身 的 运作 机 制 ， 那 么 就 是 开始 使 用 这 些 强大 的 
元 编程 能 力 进一步 应 用 这 个 语言 的 时 候 了 。 
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第 8 章 





E$6 之 后 


写作 本 部 分 的 时 候 ，ECMA 即将 对 ES6 (ECMAScript 2015) 最 终 草案 的 批准 进行 正式 投票 。 
但 尽管 ES6 还 正在 定案 ，TC39 委员 会 已 经 开始 进行 ES7/2016 及 后 续 特 性 的 紧张 工作 了 。 


在 第 1 章 已 经 讨论 过 ， 我 们 可 以 预见 JavaScript 的 发 展 节奏 将 要 从 每 隔 儿 年 更 新 一 次 进化 
到 每 年 一 个 正式 版 本 更 新 (因此 基于 年 度 命名 )。 这 将 从 根本 上 改变 JavaScript 开发 者 学 习 
和 追随 这 门 语言 发 展 进度 的 方式 。 


但 更 重要 的 是 ， 实 际 上 委员 会 将 会 以 特性 为 单位 工作 。 一 旦 某 个 特性 标准 完成 ， 并且 在 儿 
个 浏览 器 通过 实现 测试 了 思路 ， 这 个 特性 就 被 认为 足够 稳定 可 以 使 用 了 。 这 强烈 鼓励 我 们 
一 且 某 个 特性 可 用 就 采用 这 个 特性 ， 而 不 是 等 待 官方 标准 投票 。 如 果 你 还 没有 开始 学 习 
ES6， 那 么 可 就 错过 上 船 的 时 间 了 ! 























编写 本 部 分 时 ， 可 以 在 这 里 (https:/Wgithub.comy/tc39/ecma262#current-proposals) 看 到 未 来 
的 提案 及 其 状态 。 





在 新 特性 还 没有 被 需要 支持 的 所 有 浏览 器 都 实现 的 情况 下 ，transpiler 和 polyfill 是 我 们 迁 
移 到 新 特性 的 桥梁 。Babel、Traceur 和 其 他 几 个 主要 transpiler 已 经 支持 一 些 极 可 能 确定 的 
后 ES6 特性 了 。 


认识 到 这 一 点 ， 就 会 明白 现在 已 经 是 开始 了 解 这 些 特性 的 时 候 了 。 我 们 来 学 习 吧 ! 











这 些 特性 还 处 于 不 同 的 开发 阶段 。 虽 然 它们 很 可 能 会 确定 下 来 ， 并 且 将 类 似 
于 本 章 所 述 ， 但 不 要 把 这 一 章 的 内 容 全 盘 接 受 。 在 未 来 的 版 本 中 ， 这 一 章 内 
容 会 随 着 这 些 (以 及 其 他 ! ) 特性 的 最 终 确 定 而 进化 。 
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8.1 异步 函数 


在 4.2 节 中 ， 我 们 提 到 了 一 人 个 模式 的 提案 : 生成 器 向 类 似 运 行 
器 的 工具 yield 出 promise， 这 个 运行 器 工具 会 在 promise 完成 时 恢复 生成 器 。 让 我 们 来 简 
单 了 解 一 下 这 个 提案 提出 的 特性 async function。 








回忆 一 下 第 4 章 里 这 个 生成 器 的 例子 : 


run( function *main() { 
var ret = yield step1(); 


try { 
ret = yield step2( ret ); 


catch (err) { 
ret = yield step2Failed( err ); 
} 


ret = yield Promise.all([ 
step3a( ret )， 
step3b( ret )， 
step3c( ret ) 

]); 


yield step4( ret ); 
4 
.then( 
function fulfilled(){ 
// *main() 成 功 完成 
]， 
function rejected(reason){ 


// 哎呀 ， 出错 了 





} 
bp 


提案 的 async function 语法 不 需要 run(..) 工具 就 可 以 表达 同样 的 流 控 制 逻辑 ， 因 为 
JavaScript 将 会 自动 了 解 如 何 寻 找 要 等 待 和 恢复 的 promise。 


考虑 : 








async function main() { 
var ret = await step1(); 


try { 
ret = await step2( ret ); 
} 


catch (err) { 
ret = await step2Failed( err ); 


} 


ret = await Promise.all( [ 
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step3a( ret )， 

step3b( ret )， 

step3c( ret ) 
] ); 


await step4( ret ); 


} 


main() 
.then( 
function fulfilled(){ 
// main() 成 功 完 成 
]， 
function rejected(reason){ 


// 哎呀 ， 出错 了 





} 
); 
我 们 没有 使 用 function *main() {.. 声明 ， 而 是 使 用 了 async function main() {. 形式 。 
而 且 ， 没 有 yield 出 一 个 promise， 而 是 await 这 个 promise。 调 用 来 运行 函数 main() 实际 
上 返回 了 一 个 可 以 直接 观察 的 promise。 这 和 从 run(main) 调用 返回 的 promise 是 等 价 的 。 








看 到 这 种 对 称 性 了 吗 ? async function 本 质 上 就 是 生成 器 十 promise + run(..) 模式 的 语 
法 糖 ， 它 们 底层 的 运作 方式 是 一 样 的 ! 


如 有 果 你 是 一 个 C# 开发 者 ， 那 么 一 定 很 熟悉 这 个 async/await 模式 ， 因 为 这 个 特性 就 是 直接 
来 自 于 C# 的 对 应 特性 。 很 高 兴 看 到 语言 特性 收敛 。 





Babel、Traceur 和 其 他 transpiler 都 已 经 对 当前 状态 的 async function 提供 了 早期 支持 ， 
所 以 已 经 可 以 开始 使 用 这 个 特性 了 。 但 在 下 一 小 节 中 ， 我 们 将 会 介绍 为 什么 现在 有 点 为 
时 尚 早 。 


还 有 一 个 对 async function* 的 提案 ， 可 以 称 之 为 “异步 生成 器 ”。 你 可 
以 在 同一 段 代 码 中 既 yield 又 await， 甚 至 可 以 把 这 两 个 运算 放 在 同一 个 
语句 : x = await yield y。 这 个 “异步 生成 器 ”提案 似乎 更 不 稳定 一 一 
具体 说 ， 它 的 返回 值 还 没有 完全 确定 。 有 些 人 认为 返回 值 应 该 是 一 个 
observable， 有 点 类 似 于 一 个 迭代 器 和 一 个 promise 的 合并 。 目 前 我 们 不 会 
深入 探讨 这 个 主题 ， 但 会 对 它 保持 关注 。 























全 
万 


] 情 





async function 有 一 个 没有 解决 的 问题 ， 因 为 它 只 返回 一 个 promise， 所 以 没有 办 法 从 外 部 
取消 一 个 正在 运行 的 async function 实例 。 如 果 这 个 异步 操作 的 资源 紧张 ， 那 么 可 能 会 引 
起 问题 ， 因 为 一 旦 你 确认 不 需要 结果 就 会 想 要 释放 资源 。 
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举例 来 说 : 


async function request(url) { 
var resp = await ( 
new Promise( function(resolve,reject){ 

var xhr = new XMLHttpRequest(); 

xhr.open( "GET", url ); 

xhr .onreadystatechange = function(){ 
if (xhr.readyState == 4) { 

if (xhr.status == 200) { 
resoLve( xhr ); 


} 
else { 
reject( xhr.statusText ); 
3 
} 
}; 
xhr.send(); 


}) 
); 


return resp.responseText; 


} 
var pr = request( "http://some.url.1" ); 


pr.then( 
function fulfilled(responseText){ 
// ajax 成 功 
function rejected(reason){ 
// 哎 呀 ， 出 错 了 
} 
); 





我 给 出 的 这 个 request(..) 有 点 像 最 近 提 出 要 集成 到 Web 平台 上 的 fetch(..) 工具 。 那 么 问 
题 来 了 ， 如 果 你 想 要 用 pr 值 以 某 种 方法 指示 取消 一 个 长 时 间 运 行 的 Ajax 请 求 会 怎样 呢 ? 





Promise 是 不 可 取消 的 〈 至 少 在 编写 本 部 分 的 时 候 是 如 此 )。 和 很 多 人 一 样 ， 我 的 看 法 是 
它们 永远 不 应 该 被 取消 (参见 本 系列 《你 不 知道 的 JavaScript (中 卷 )》 第 二 部 分 )。 而 且 
即使 它 有 一 个 cancel() 方法 ， 就 一 定 意 味 着 调用 pr.canceL() 应 该 把 取消 信号 一 路 沿 着 
promise 链 传播 回 到 async function 吗 ? 


这 个 和 争论 有 以 下 几 个 可 能 的 解决 方案 : 


。 async function 根本 不 能 被 取消 (现状) ; 

。 可 以 在 调用 异步 函数 的 时 候 传 和 一 个 “取消 令 牌 ”; 

。 返回 值 变 成 一 个 新 增 的 可 取消 promise 类 型 ， 

。 返回 值 变 成 某 种 非 promise 的 东西 (比如 ，observable， 或 者 支持 promise 和 取消 功能 的 
控制 令 牌 )。 
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编写 本 部 分 时 ，async function 返 
判断 最 终 如 何 发 展 还 为 时 过 早 。 我 们 对 这 个 讨论 保持 关注 吧 。 





8.2 0bject.observe(..) 


Web 前 端 开 发 的 圣杯 之 一 就 是 数据 绑 定 一 一 侦 听 数据 对 象 的 更 新 ， 同 步 这 个 数据 


表示 。 多 数 JavaScript 村 


E 架 都 为 这 类 操作 提供 了 某 种 机 制 |。 





回 普通 promise， 所 以 返回 值 














不 太 可 能 会 彻底 改变 。 但 是 





的 DOM 





可 能 在 后 ES6， 我 们 将 会 看 到 通过 工具 0bject.observe(..) 直接 添加 到 语言 中 的 支持 。 本 
质 上 说 ， 这 个 思路 就 是 你 可 以 建立 一 个 侦 听 者 (listener) 来 观察 对 象 的 改变 ， 然 后 在 每 次 
变化 发 生 时 调用 一 个 回调 。 例 如 ， 你 可 以 据 此 更 新 DOM。 





你 可 以 观察 的 改变 有 6 种 类 型 : 


。 add 

。 Update 

。 delete 

。 reconfigure 
。 SetpPrototype 


。 preventExtensions 





默认 情况 下 ， 你 可 以 得 到 所 有 这 些 类 型 的 变化 的 通知 ， 也 可 以 进行 过 滤 只 侦 听 关注 的 类 型 。 


考虑 : 


var obj = { a: 1， 


Object .observel( 
obj, 


Dis 2 ks 


function(changes){ 
for (var change of changes) { 
console.log( change ); 


I 
}， 


[ "add", "update", "delete" ] 


); 


obj ee 33 


// { name: "c", object: obj, type: "add" } 


obj.a = 42; 


// { name: "a", object: obj, type: 


delete obj.b; 


// { name: "b", object: obj, type: 


除了 主要 的 "add"、"update" 和 "delete" 变化 类 型 ; 


"update", oldValue: 1 } 


"delete", oldValue: 2 } 
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。 如 果 一 个 对 象 通过 0bject.defineProperty(..) 重新 配置 这 个 对 象 的 属性 ， 比 如 修改 
它 的 writable 属性 ， 就 会 发 出 "reconfigure" 改变 事件 。 参 见 本 系列 《你 不 知道 的 
JavaScript (上 卷 )》 第 二 部 分 可 以 获取 更 多 信息 ; 

。 如 果 一 个 对 象 通 过 0bject.preventExtensions(..) 变 为 不 可 扩展 ， 就 会 发 出 "prevent 
Extensions" 改变 事件 。 

















为 0bject.seaL(..) 和 0bject.freeze(..) 也 都 意味 着 0bject.preventExtensions(..)， 
所 以 它们 也 会 发 出 相应 的 改变 事件 。 另 外 ,对 象 的 每 个 属性 都 会 发 出 "reconfigure" 改变 
事件 。 如 果 一 个 对 象 的 [[Prototype]] 改变 ， 或 者 通过 _proto__ setter 来 设置 ， 或 者 使 用 
0bject.setPrototy peof(..) 来 设置 ， 都 会 发 出 "setPrototype'" 改变 事件 。 




















注意 ， 这 些 改 变 事件 会 在 改变 发 生 后 立即 发 出 。 不 要 把 这 一 点 和 代理 混淆 (参见 第 7 章 )， 
E 是 可 以 在 动作 发 生 之 前 拦截 的 。 对 象 观 察 支持 在 变化 (或 一 组 变化 ) 发 生 后 响应 。 


8.2.1 自 定义 改变 事件 
除了 前 面 6 类 内 置 改变 事件 ， 你 也 可 以 侦 听 和 发 出 自 定义 改变 事件 。 


考虑 : 








让 

















function observer(changes){ 
for (var change of changes) { 
if (change.type == "recalc") { 
Change.object.c = 
change.object.oldValue + 
change.object.a + 
change.object.b; 


} 


function changeObj(a,b) { 
var notifier = Object.getNotifier( obj ); 
obj.a=a* 2; 
0bj:b: = bs .33 


// 把 改变 事件 排 到 一 个 集合 中 
notifier.notify( { 
type: "recalc", 
name: "c", 
oldValuye: obj.c 
}); 
} 








var obj = {a: 1, b: 2, c: 3}; 


Object .observel 
obj, 
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observer ， 
["recalc"] 


); 


change0bj( 3, 11 ); 


obj.a; 
obj.b; 
obj.c; 


改变 集合 (" 


// 12 
// 30 
// 3 





recalc" 自 定义 事 





此 obj.c 的 值 仍然 是 3。 


默认 情况 下 ， 


改变 会 在 当前 事件 循环 的 最 后 发 送 (参见 


























件 ) 已 经 排 入 队列 准备 发 送 给 观测 者 ， 但 


是 还 没有 发 训 


送 


， 


见 本 系列 《你 不 知道 的 JavaScript (中 


卷 )》 第 二 部 分 )。 如 果 你 想 要 立即 发 送 ， 可 以 使 用 Object.deLiverChangeRecords(observer ) 。 








且 改 变 事件 发 送 后 ， 你 


obj.c; 

















// 42 





就 可 以 看 到 obj.c 如 预期 地 更 新 为 : 


在 前 面 的 例子 中 ， 我 们 用 完成 改变 事件 记录 来 调用 notifier.notify(.. 


还 有 一 种 改变 记 














录入 队 的 方式 是 使 用 performChange(..)， 这 会 es 7 离 
出 来 (通过 函数 回调 )。 考 虑 : 


notifier.performChange( 





return { 


}; 
}); 


某 些 情况 下 ， 


8.2.2 
就 像 普通 的 习 


name: "c", 








"recalc", function(){ 


// this 就 是 在 观察 之 中 的 对 象 





oldValue: this.c 


这 种 关注 分 离 可 能 


结束 观测 





万 件 侦 听 器 一 样 ， 


0bject.unobserve(..) 来 实现 。 


举例 来 说 : 


var obj 




















会 更 干净 地 映射 到 你 的 使 用 模式 。 


你 可 能 希望 停止 观测 一 个 对 象 的 改变 事件 。 为 此 ， 可 以 通 





三 


Object.observe( obj，function observer(changes) { 
for (var change of changes) { 
if (change.type == "setPrototype") { 
Object.unobserve( 
change.object, observer 


); 
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在 这 个 小 例子 中 ， 我 们 侦 听 改变 事件 ， 直 到 看 到 "setPrototype" 事件 发 生 ， 然 后 就 停止 观 
察 任何 新 改变 事件 。 


8.3” 帘 运算 符 


有 提案 提出 为 JavaScript 新 增 一 个 运算 符 用 于 执行 客运 算 ， 就 像 Math.pow(..) 一 样 。 考 虑 : 








var a = 2; 

a xx 4; // Math.pow( a, 4 ) == 16 
a Ts 3 // a = Math.pow( a, 3 ) 
a; // 8 


xx 实际 上 和 Python、Ruby、Perl 以 及 其 他 一 些 语言 中 的 同名 运算 符 一 样 。 


8.4 对 和 象 属性 与 . . . 
我 们 在 2.5 节 已 经 看 到 ，... 运算 符 展 开 和 收集 数组 的 用 法 很 直观 ， 那 么 对 于 对 象 呢 ? 


本 考虑 在 ES6 中 支持 这 个 功能 ， 但 已 经 被 推迟 到 了 ES6 之 后 (也 就 是 “ES7” 或 者 
“ES2016” 或 者 ……)。 下 面 是 它 在 “ES6 之 后 ”的 时 代 中 可 能 的 工作 方式 : 








console.log( 03.a, 03.b, 03.c, 03.d ); 
//1234 


… 运算 符 可 能 也 会 用 于 把 对 象 的 解构 属性 收集 到 一 个 对 象 : 


Var :04 {bs 2 C4 3 ds 4} 
vart { b,xxx02 } = 0 


console.log( b, o02.c, 02.d ); J{ 234 


在 这 里 ，.. .02 把 解构 的 c 和 dd 属性 重新 收集 回 到 02 对象 (02 没有 ol 中 的 ab 属性 )。 











再 次 声明 ， 这 只 是 ES6 之 后 的 在 考虑 之 中 的 提案 。 但 是 如 果实 现 的 话 会 很 栈 。 
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8.5 Array#includes(..) 


JavaScript 开发 者 需要 执行 的 一 个 极其 常见 的 任务 就 是 在 值 数组 中 搜索 一 个 值 。 一 直 以 来 
实现 这 个 任务 的 方法 是 : 














var vals = [ "foo"，"bar"，42，"baz”]; 


if (vaLs.indexof( 42 ) >= 0) { 
// 找到 了 ! 


使 用 >= 9 检查 的 原因 是 ， 如 果 找 到 的 话 index0f(..) 返回 一 个 9 或 者 更 大 的 数字 值 ， 如 果 
没有 找到 就 会 返回 -1。 换 句 话说 ， 我 们 是 在 布尔 值 上 下 文中 使 用 返回 索引 的 函数 。 因 为 -1 
为 真 而 不 是 假 ， 所 以 需要 更 多 的 手动 检查 。 


在 本 系列 《你 不 知道 的 JavaScript (中 卷 )》 第 一 部 分 中 ， 探 讨 了 另外 一 种 我 更 偏爱 的 模式 ， 

















var vals = [ "foo"，"bar"，42，"baz”]; 


if (~vaLs.indexof( 42 )) { 
// 找到 了 ! 


这 里 的 ~ 运算 符 把 indexof(..) 返回 值 规范 为 更 适合 强制 转换 为 布尔 型 的 值 范 围 。 也 就 是 
说 ，-1 产生 8( 假 )， 所 有 其 他 值 产生 非 0 值 ( 真 )， 这 正 是 判断 是 否 找到 这 个 值 所 需 的 。 





我 认为 这 是 一 个 改进 ， 然 而 其 他 人 强烈 反对 。 但 是 ， 设 有 人 认为 indexof(..) 的 搜索 逻辑 
是 完美 的 。 比 如 ， 它 无 法 找到 数组 中 NaN 值 。 


于 是 出 现 了 一 个 获得 了 大 量 支持 的 提案 ， 提 出 增加 一 个 真正 返回 布尔 值 的 数组 搜索 方法 ， 
称 为 includes(..): 








var vals = [ "foo", "bar", 42, "baz" ]; 


if (vals.includes( 42 )) { 
// 找到 了 ! 
} 


Array#includes(..) 使 用 的 匹配 逻辑 能 够 找到 NaN 值 ， 但 是 无 法 区 分 -9 和 
9 (参见 本 系列 《你 不 知道 的 JavaScript (中 卷 )》 第 一 部 分 )。 如 果 你 不 关心 
程序 中 的 -9 值 ， 那 么 这 可 能 就 是 你 所 需要 的 。 如 果 你 确实 在 意 这 个 -9 值 的 
话 ， 那 么 你 就 需要 实现 自己 的 搜索 逻辑 ， 很 可 能 是 使 用 0bject.is(..) 工具 
(参见 第 6 章 )。 
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8.6 SIMD 


我 们 在 本 系列 《你 不 知道 的 JavaScript (中 卷 )》 第 二 部 分 中 详细 介绍 了 单 指令 多 数据 
(Single Instruction, Multiple Data，SIMD) ， 但 是 值得 在 这 里 简单 说 明 一 下 ， 因 为 这 很 可 能 
会 是 接 下 来 出 现在 未 来 JavaScript 中 的 特性 之 一 。 

SIMD API 暴 露 了 可 以 同时 对 多 个 数字 值 运算 的 各 种 底层 (CPU) 指令 。 比 如 ， 你 可 以 指定 
两 个 向 量 ， 其 中 分 别 有 4 个 或 8 个 数字 ， 把 它们 的 对 应 元 素 一 次 全 部 相 乘 (数据 并 行 ! )。 
考虑 : 


var v1 = SIMD.fLoat32x4( 3.14159, 21.0, 32.3, 55.55 ); 
var v2 = SIMD.float32x4( 2.1, 3.2, 4.3, 5.4 ); 






































SIMD.float32x4.mul( vi, v2 ); 
// [ 6.597339, 67.2, 138.89, 299.97 ] 











除了 muL(..) ( 相 乘 ) 之 外 ，SIMD 还 会 包含 其 他 几 个 运算 ， 比 如 sub()、div()、abs()、 
neg()、sqrt() 以 及 很 多 其 他 运算 。 


对 于 下 一 代 高 性 能 JavaScript 应 用 来 说， 并 行 数学 运算 是 很 关键 的 。 





8.7 WebAssembly (WASM) 


在 本 部 分 即将 完成 的 时 候 ，Brendan Eich 对 WebAssembly (WASM) 的 最 新 声明 ， 可 能 
会 对 JavaScript 的 未 来 发 展 路 线 产生 重大 影响 。 这 里 我 们 无 法 详细 介绍 WASM， 因 为 在 
编写 本 部 分 的 时 候 它 还 处 于 刚刚 开始 的 阶段 。 但 如 果 不 简要 介绍 一 下 这 一 主题 ， 本 部 分 就 


是 不 完整 的 。 








最 近 (以 及 不 久 的 将 来 ) JavaScript 语言 设计 修改 上 的 最 大 压力 之 一 就 是 需要 成 为 更 适合 
从 其 他 语言 (比如 C/C++、ClojureScript 等 ) 变换 / 交 又 编译 的 目标 语言 。 显 然 ， 代 码 作为 
JavaScript 运行 的 性 能 问题 一 直 古 一 个 主要 关注 点 。 














本 系列 《你 不 知道 的 JavaScript (中 卷 )》 第 二 部 分 中 介绍 过 ， 几 年 前 一 组 Mozilla 开发 者 
为 JavaScript 引入 了 一 个 新 思路 ， 称 为 ASM.js。ASM.js 是 合法 JavaScript 的 一 个 子 集 ， 这 
个 子 集 最 严格 地 限制 了 那些 使 得 JavaScript 引擎 难于 优化 的 行为 。 结 果 就 是 兼容 ASM.js 的 
代码 运行 在 支持 ASM 的 引擎 上 时 效率 有 巨大 的 提升 ， 几 乎 与 原生 优化 的 等 价 C 程序 相当 。 
很 多 人 把 ASM.js 看 作 是 高 性 能 要 求 JavaScript 应 用 使 用 JavaScript 的 最 可 能 支柱 。 











换 名 话说， 浏览 器 中 运行 代码 的 所 有 路 径 都 通过 JavaScript。 











直到 WASM 发 布 之 前 ， 是 这 样 的 。WASM 为 其 他 语言 在 浏览 器 运行 时 环境 中 运行 提供 了 
一 条 新 路 径 ， 不 需要 先 通 过 JavaScript。 本 质 上 说 ， 如 果 WASM 发 布 ，JavaScript 引 敬 将 














-A 
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会 获得 执行 二 进 制 格 式 代码 的 新 能 力 ， 这 种 格式 某 种 程度 上 类 似 于 字 节 码 (bytecode， 就 
像 JVM 上 运行 的 那样 ) 。 


WASM 提出 了 一 种 代码 的 高 度 压 缩 AST (语法 树 ) 二 进 制 表示 格式 ， 然 后 可 以 直接 向 
JavaScript 引擎 发 出 指令 ， 而 它 的 基础 结构 ， 不 需要 通过 JavaScript 解析 ， 甚 至 不 需要 符合 
JavaScript 的 规则 。 像 C 或 C++ 这 样 的 语言 可 以 被 直接 编译 为 WASM 格式 而 不 是 ASM.js， 
这 样 通过 跳 过 JavaScript 解析 会 获得 额外 的 速度 优势 。 





er 

















WASM 的 近期 目标 是 与 ASM.js 和 真正 JavaScript 相当 。 但 最 终 的 预期 是 ，WASM 将 会 
增加 新 功能 ， 而 这 些 新 功能 是 超出 JavaScript 所 能 做 的 。 比 如 像 线 程 这 样 的 激进 功能 给 
JavaScript 带 来 了 很 大 压力 一 一 这 个 改变 将 会 给 整个 JavaScript 生态 系统 带 来 巨大 震撼 一 一 
将 很 可 能 会 成 为 一 个 WASM 扩展 ， 缓 解 JavaScript 本 身 的 修改 压力 。 








实际 上 ， 这 个 新 的 发 展 图 景 为 很 多 语言 打开 了 新 的 道路 ， 使 其 能 够 进入 Web 运行 时 。 对 于 
Web 平台 来 说 ， 这 是 一 个 令 人 激动 的 新 特性 。 


对 于 JavaScript 来 说 这 意味 着 什么 JavaScript 将 会 变 得 无 关 紧 要 或 者 “死去 ” 吗 ? 绝对 不 
会 ! 看 起 来 在 以 后 的 几 年 里 ，ASM.js 不 会 有 太 大 的 发 展 了 ， 但 在 Web 平台 中 JavaScript 的 
主体 还 是 非常 安全 的 。 

WASM 的 支持 者 认为 ，WASM 的 成 功 将 意味 着 JavaScript 的 设计 可 以 免 于 被 不 现实 的 需求 
撕 裂 的 压力 。 重 点 是 ， 对 于 应 用 中 的 高 性 能 部 分 WASM 是 更 好 的 目标 ， 可 以 用 其 他 多 种 
语言 编写 。 

有 趣 的 是 ，JavaScript 是 未 来 不 太 可 能 转化 为 WASM 的 语言 之 一 。 未 来 的 修改 可 能 会 刻 
划 出 JavaScript 的 一 个 适合 于 转化 为 WASM 的 子 集 ， 但 是 这 条 发 展 路 径 的 优先 级 似乎 
并 不 高 。 





























尽管 JavaScript 很 可 能 不 会 转化 为 WASM， 但 是 JavaScript 代码 和 WASM 代码 将 能 够 最 
大 程度 地 交互 ， 就 像 现在 的 模块 交互 一 样 自然 。 你 可 以 设想 调用 像 foo() 这 样 的 JavaScript 
函数 ， 而 实际 上 调用 的 是 一 个 同名 的 能 够 在 你 的 其 余 JavaScript 的 限制 之 外 良好 运行 的 
WASM 函数 。 

















当下 用 JavaScript 编写 的 代码 将 可 能 继续 用 它 编写 ， 至少 在 可 见 的 未 来 是 这 样 。transpile 
到 JavaScript 的 东西 将 可 能 最 终 考 虑 使 用 WASM 替代 。 对 于 那些 性 能 要 求 极 高 ， 不 能 
容忍 多 层 抽象 的 功能 ， 最 有 可 能 的 选择 是 寻找 合适 的 非 JlavaScript 语言 编写 ， 然 后 以 
WASM 为 目标 。 








这 个 转变 可 能 会 比较 缓慢 ， 需 要 几 年 才能 完成 。WASM 进入 所 有 主流 浏览 器 平台 可 能 
少 也 需要 数 年 。 同 时 ，WASM 项 目 (https://github.com/WebAssembly) 已 经 有 一 个 早期 的 
polyfill 对 其 基本 宗旨 提供 了 概念 证 明 。 
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但 随 着 时 间 的 发 展 ， 也 随 着 WASM 学 到 更 多 非 JavaScript 技巧 ， 很 可 能 当前 一 些 
JavaScript 的 东西 会 被 重 构 为 以 WASM 为 目标 的 语言 。 举 例 来 说 ， 框 架 、 游 戏 引擎 以 及 
其 他 常用 工具 中 性 能 敏感 的 部 分 都 可 能 从 这 样 的 转变 中 获 益 。 在 自己 的 Web 应 用 中 使 用 
这 些 工 具 的 开发 者 很 可 能 不 会 注意 到 使 用 和 集成 过 程 中 的 差别 ， 只 会 自动 受益 于 性 能 和 
功能 的 提高 。 


可 以 确定 的 是 ， 随 着 时 间 的 发 展 WASM 会 越 来 越 真实 ， 对 Javascript 的 发 展 方向 和 设计 的 
影响 也 会 越 来 越 大 。 这 可 能 是 “ES6 之 后 ”中 最 值得 开发 者 关注 的 重要 主题 之 一 。 





























8.8 小 结 


如 果 说 本 质 上 本 系列 的 其 他 几 本 书 都 是 提出 这 个 挑战 :“ 你 〈 可 能 ) 不 〈 像 你 以 为 的 那 
么 ) 懂 JavaScripf ， 那 么 本 部 分 就 是 在 说 :“ 你 不 再 懂 JavaScript 了 ”。 本 部 分 覆盖 了 这 
个 语言 大 量 的 ES6 新 主题 ， 这 是 这 个 语言 的 令 人 向 动 的 新 特性 和 范式 ， 将 会 永久 地 改进 
JavaScript 程序 。 








但 ES6 并 不 是 JavaScript 的 终结 。 还 早 得 很 呢 ! 在 “ES6 之 后 ”这 段 时 间 已 经 出 现 了 大 量 
处 于 各 种 开发 阶段 的 新 特性 。 在 这 一 章 里 ， 我 们 简单 了 解 了 那些 在 不 和 久 的 将 来 很 可 能 进入 
JavaScript 的 新 特性 。 








async function 是 建立 在 生成 器 + promise 模式 (参见 第 4 章 ) 之 上 的 强大 的 语法 糖 。 
0bject.observe(..) 为 观察 对 象 改变 事件 增加 了 直接 的 原生 支持 ， 这 对 于 实现 数据 绑 定 很 
重要 。 害 运 算 符 *、 针 对 对 象 属性 的 ... 以 及 Array#includes(..) 都 是 对 现 有 机 制 简单 但 
有 用 的 改进 。 最 后 ，SIMD 把 高 性 能 JavaScript 的 革命 带 入 一 个 新 时 代 。 


昕 起 来 像 陈 词 滥 调 ， 但 JavaScript 的 未 来 是 光明 的 ! 这 个 系列 ， 特 别 是 本 书 的 这 一 部 分 ， 
已 经 把 挑战 放 在 了 读者 的 面前 。 你 还 在 等 什么 ”是 时 候 开始 学 习 和 探索 了 ! 
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“ 当 你 努力 理解 自己 所 写 的 代码 时 ;你 不 但 创造 子 更 好 的 工作 
成 果 :i 也 提升 了 自己 的 能 力 ; 这 些 代 码 不 再 只 是 你 的 工作 ; 
而 是 成 了 你 的 手艺 :这 就 是 我 喜爱 本 书 的 理由 
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你 不 知道 的 JavaScript + 


JavaScript 语 言 有 很 多 复杂 的 概念 ， 但 却 用 简单 的 方式 体现 出 来 (比如 回调 函数 ) ， 因 此 ，JavaScript 开 
发 者 无 需 理解 语言 内 部 的 原理 ， 就 能 编写 出 功能 全 面 的 程序 。 然 而 ，JavaScript 的 这 些 复杂 精妙 的 概念 才 
是 语言 的 精髓 ， 即 使 是 经 验 丰 富 的 JavaScript 开 发 者 ， 如 果 没 有 认真 学 习 ， 也 无 法 真正 理解 语言 本 身 的 特 
性 。 正 是 因为 绝 大 多 数 人 不 求 甚 解 ， 一 遇 到 出 平 意料 的 行为 就 认为 是 语言 本 身 有 缺陷 ， 进 而 把 相关 的 特 
性 加 入 黑 名 单 ， 久 而 久之 就 排除 了 这 门 语 言 的 多 样 性 ， 人 为 地 使 它 变 得 不 完整 、 不 安全 。 


“你 不 知道 的 JavaScript” 系 列 就 是 要 让 不 求 甚 解 的 JavaScript 开 发 者 迎 难 而 上 ， 深 入 语言 内 部 ， 弄 清楚 
JavaScript 每 一 个 零 部 件 的 用 途 ， 轻 松 理解 前 端 圈 里 出 现 的 各 种 技术 、 框 架 和 流行 术语 。 本 书 介绍 了 该 系 
统 的 两 个 主题 : “起 步 上 路 ”以 及 “ES6 及 更 新 版 本 ”。 
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看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 
或 作 译 者 协助 答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨 论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : 


ebook@turingbook.com。 

在 这 可 以 找到 我 们 : 

微 博 @ 图 灵 教 育 : 好 书 、 活 动 每 日 播报 

微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 

微 信 图 灵 访 谈 : ituring_interview， 讲 述 码 农 精彩 人 生 
微 信 图 灵 教 育 : turingbooks 
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